できる！ ウォーターマーク（透かし）を画像に入れる方法
- watermark jQuery js の使い方

インストール｜jQueryのインクルード｜基本的な使い方｜これまでのまとめ｜ スライドショーの画像に透かしを入れる（応用編）｜Wartermark（透かし）作成デモ

画像にウォーターマーク（透かし）を入れてくれるるwatermark jQuery js (以下 watermark js と言う)は、幾つかありますが、
このぺージは、lelinhtinh さんの jQuery plugin Watermark を紹介します。
watermark jsの応用例として、ウォーターマーク（透かし）をスライドショーの画像にも入れることができます。
ただし、スライド画像がつぎのようにimgタグで定義されていることが必要です。aタグで画像を定義しているものはだめです。

・画像定義例（bxSlider）
<div  class="my-bxslider1" id="bx-pager" style="width:600px">
  <div><img class="img_awesome" src="/photo/fancybox3/people/girl-pixabay-04.jpg" title="女性 A" /></div>
  <div><img class="img_awesome" src="/photo/fancybox3/people/girl-pixabay-09.jpg" title="女性 B" /></div>
</div>

● インストール

つぎのサイトから、watermark.zip または watermark.tar.gz をダウンロードします。 jQuery plugin Watermark（MIT License (c) lelinhtinh）
ダウンロードしたファイルを解凍後、サーバーへアップロードします。
使用するファイルは、jquery.watermark.js または jquery.watermark.min.js です。

・watermark jsのインクルード（ダウンロードの場合） 
<!-- jQuery plugin Watermark -->
<script src="jquery.watermark.min.js" type="text/javascript"></script>

・watermark jsのインクルード（CDN使用の場合-ダウンロード不用） 
<!-- jQuery plugin Watermark -->
<script src="https://unpkg.com/watermark@1.0.2/dist/jquery.watermark.min.js" type="text/javascript"></script>

● jQueryのインクルード

jQueryファイルは、jQueryファイルCDNサイトよりバージョン1.5以上を使用します。 jQueryファイルCDNサイト

・インクルード 
<!-- jQuery 1.5+ -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

● 基本的な使い方

javascript

透かし(watermark)に用いる、透過画像および文字の設定例をつぎに示します。
watermark起動のオプション詳細は、こちらを参照してください。

・透かし画像 

$(function() {
  $('.img_awesome').watermark({
    path: 'https://i.imgur.com/LcpZHu5.png',
    gravity: 'c', //透かしのポジション The position of the watermark on the image (nw, n, ne, w, e, sw, s, se, c).
  });
});

・透かし文字 

$(function() {
  $('.img_awesome').watermark({
   text: 'これは透かしのテキストです・・・', //透かしのテキスト
   textWidth: 500, //横幅
   textSize: 30,//フォントサイズ
   textColor: 'white', //テキストの色
   textBg: 'rgba(0, 0, 0, 0.4)', //背景色
   gravity: 'c', //透かしのポジション The position of the watermark on the image (nw, n, ne, w, e, sw, s, se, c).
   opacity: 0.7, //透過度
   margin: 10, //余白
  });
});

html


<img class="img_awesome" src="img/1.jpg" alt="" />
<img class="img_awesome" src="img/2.jpg" alt="" />
<img class="img_awesome" src="img/3.jpg" alt="" />

● これまでのまとめ

これまでをまとめて、透かし画像および透かし文字のHTMLをつぎのとおり作成しました。

  1. まとめHTML（透かし画像）デモ ≫
  2. まとめHTML（透かし文字）デモ ≫ 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ウォーターマーク（透かし）を画像に入れる方法
- watermark jQuery js の使い方（透かし画像 まとめHTMLデモ）</title>

<!-- jQuery 1.5+ -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<!-- jQuery plugin Watermark -->
<script src="jquery.watermark.min.js" type="text/javascript"></script>

</head>
<body>
<h1>ウォーターマーク（透かし）を画像に入れる方法<br>
- watermark jQuery js の使い方（透かし画像 まとめHTMLデモ）</h1>

<img class="img_awesome" src="http://urbanqee.com/webutil/photo/fancybox3/people/girl-pixabay-01.jpg" alt="" />
<img class="img_awesome" src="http://urbanqee.com/webutil/photo/fancybox3/people/girl-pixabay-02.jpg" alt="" />
<img class="img_awesome" src="http://urbanqee.com/webutil/photo/fancybox3/people/girl-pixabay-03.jpg" alt="" />

<script>
$(function() {
  $('.img_awesome').watermark({
    path: 'http://urbanqee.com/webutil/photo/fancybox3/img/wartermark-2-2095933.png',   //https://i.imgur.com/LcpZHu5.png
    gravity: 'nw', //透かしのポジション The position of the watermark on the image (nw, n, ne, w, e, sw, s, se, c).
  });
});
</script>

<hr>
MIT License (c) lelinhtinh
</body>
</html> 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ウォーターマーク（透かし）を画像に入れる方法
- watermark jQuery js の使い方（透かし文字 まとめHTMLデモ）</title>

<!-- jQuery 1.5+ -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<!-- jQuery plugin Watermark -->
<script src="jquery.watermark.min.js" type="text/javascript"></script>

</head>
<body>
<h1>ウォーターマーク（透かし）を画像に入れる方法<br>
- watermark jQuery js の使い方（透かし文字 まとめHTMLデモ）</h1>

<img class="img_awesome" src="http://urbanqee.com/webutil/photo/fancybox3/people/girl-pixabay-01.jpg" alt="" />
<img class="img_awesome" src="http://urbanqee.com/webutil/photo/fancybox3/people/girl-pixabay-02.jpg" alt="" />
<img class="img_awesome" src="http://urbanqee.com/webutil/photo/fancybox3/people/girl-pixabay-03.jpg" alt="" />

<script>
$(function() {
 $('.img_awesome').watermark({
  text: 'これは透かしのテキストです・・・', //透かしのテキスト
  textWidth: 500, //横幅
  textSize: 30,//フォントサイズ
  textColor: 'white', //テキストの色
  textBg: 'rgba(0, 0, 0, 0.4)', //背景色
  gravity: 'c', //透かしのポジション The position of the watermark on the image (nw, n, ne, w, e, sw, s, se, c).
  opacity: 0.7, //透過度
  margin: 10, //余白
 });
});

</script>
<hr>
MIT License (c) lelinhtinh
</body>
</html>

● スライドショーの画像に透かしを入れる（応用編）

スライドショー（スライダー）の動く画像に透かしを入れることを試みましたが、数あるスライダーの中で、
bxSlider、slick および Swiper に透かし（watermark）を入れることができました。

　使い方

スライドショーの画像に透かしを入れる方法は、bxSlider、slick および SwiperのHTML（下記標準サンプル参照）に、
以下に示す "watermark jsのインクルード" および "watermark起動" のHTMLコードを挿入します。
watermark起動のオプションは、こちらを参照してください。

・watermark jsのインクルード 

<!-- jQuery plugin Watermark -->
<script src="jquery.watermark.min.js" type="text/javascript"></script>

・透かし画像の場合（watermark起動） 

$(function() {
  $('.img_awesome').watermark({
    path: 'https://i.imgur.com/LcpZHu5.png',
    gravity: 'c', //透かしのポジション The position of the watermark on the image (nw, n, ne, w, e, sw, s, se, c).
  });
});

・透かし文字の場合（watermark起動） 

$(function() {
  $('.img_awesome').watermark({
   text: 'これは透かしのテキストです・・・', //透かしのテキスト
   textWidth: 500, //横幅
   textSize: 30,//フォントサイズ
   textColor: 'white', //テキストの色
   textBg: 'rgba(0, 0, 0, 0.4)', //背景色
   gravity: 'c', //透かしのポジション The position of the watermark on the image (nw, n, ne, w, e, sw, s, se, c).
   opacity: 0.7, //透過度
   margin: 10, //余白
 });
});

　透かし（watermark）設定サンプル

　bxSlider標準サンプルおよびslick 標準サンプルに、透かし（watermark）を設定したHTMLについて、つぎに示します。


・HTMLソースコード - bxSlider標準サンプル 、slick 標準サンプル 
<!DOCTYPE html>
<html>
<head>
<meta content="charset=utf-8">
<title>bxSlider 標準サンプル </title>

<!-- jQuery library (served from Google) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.css" rel="stylesheet" />

<style>
body { 
    max-width: 800px;
    width:800px;
    margin: 0 auto;  
    padding: 0px; 
}

.my-bxslider1 > li {
    height: 340px;
}
/*
.my-bxslider1 > li > img {
    height: auto;
}

*/
</style>

<head>
<body style="">
<h2 style="text-align:center">bxSlider 標準サンプル</h2>

<div  class="my-bxslider1" id="bx-pager" style="width:600px">
  <div><img class="img_awesome" src="http://urbanqee.com/webutil/photo/fancybox3/people/girl-pixabay-04.jpg" title="女性 A" /></div>
  <div><img class="img_awesome" src="http://urbanqee.com/webutil/photo/fancybox3/people/girl-pixabay-09.jpg" title="女性 B" /></div>
  <div><img class="img_awesome" src="http://urbanqee.com/webutil/photo/fancybox3/people/girl-pixabay-07.jpg" title="女性 C" /></div>
  <div><img class="img_awesome" src="http://urbanqee.com/webutil/photo/fancybox3/people/girl-pixabay-03.jpg" title="女性 D" /></div>
  <div><img class="img_awesome" src="http://urbanqee.com/webutil/photo/fancybox3/people/girl-pixabay-12.jpg" title="女性 E" /></div>
</div>

<!-- bxslider 起動 -->
<script>
$(document).ready(function(){
    
 $('.my-bxslider1').bxSlider({
  //pagerCustom: '#bx-pager',
  mode: 'fade',
  captions: true, 
  auto: true,
  pause: 5000,
  slideWidth: 920
 });

});
</script>

<hr>
<a href="https://bxslider.com/" target="_balnk">bxSlider by Steven Wanderski </a>

</body>
</html>
<!DOCTYPE html>
<html>
<head>
  <title>slick 標準サンプル</title>
  <meta charset="UTF-8">

 <!-- jQuery -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

<!-- Add the slick-theme.css if you want default styling -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<!-- Add the slick-theme.css if you want default styling -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>

  <style type="text/css">
    html, body {
      margin: 0;
      padding: 0;
    }

    * {
      box-sizing: border-box;
    }

    .slider {
        width: 50%;
        margin: 20px auto;  /* 100px */
    }

    .slick-slide {
      margin: 0px 20px;
    }

    .slick-slide img {
      width: 100%;
    }

    .slick-prev:before,
    .slick-next:before {
      color: black;
    }


    .slick-slide {
      transition: all ease-in-out .3s;
      opacity: .2;
    }
    
    .slick-active {
      opacity: .5;
    }

    .slick-current {
      opacity: 1;
    }
  </style>
</head>
<body>
<h1 style="text-align:center">slick 標準サンプル</h1>

  <section class="regular slider">
    <div>
      <img src="http://urbanqee.com/webutil/photo/fancybox3/people/girl-pixabay-11.jpg" class="mm">
    </div>
    <div>
      <img src="http://urbanqee.com/webutil/photo/fancybox3/people/girl-pixabay-12.jpg" class="mm">
    </div>
    <div>
      <img src="http://urbanqee.com/webutil/photo/fancybox3/people/girl-pixabay-13.jpg" class="mm">
    </div>
    <div>
      <img src="http://urbanqee.com/webutil/photo/fancybox3/people/girl-pixabay-14.jpg" class="mm">
    </div>
    <div>
      <img src="http://urbanqee.com/webutil/photo/fancybox3/people/girl-pixabay-09.jpg" class="mm">
    </div>
    <div>
      <img src="http://urbanqee.com/webutil/photo/fancybox3/people/girl-pixabay-16.jpg" class="mm">
    </div>
  </section>

<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

<!-- slick 起動 -->
<script type="text/javascript">
$(function() {
      $(".regular").slick({
        autoplay: true,
        autoplaySpeed: 5000,
        dots: true,
        infinite: true,
        slidesToShow: 1,
        slidesToScroll: 1
      });
 });
</script>

<!--
$('.slider').slick({
  // アクセシビリティ。左右ボタンで画像の切り替えをできるかどうか
  accessibility: true,
  // 自動再生。trueで自動再生される。
  autoplay: false,
  // 自動再生で切り替えをする時間
  autoplaySpeed: 3000,
  // 自動再生や左右の矢印でスライドするスピード
  speed: 400,
  // 自動再生時にスライドのエリアにマウスオンで一時停止するかどうか
  pauseOnHover: true,
  // 自動再生時にドットにマウスオンで一時停止するかどうか
  pauseOnDotsHover: true,
  // 切り替えのアニメーション。ease,linear,ease-in,ease-out,ease-in-out
  cssEase: 'ease',
  // 画像下のドット（ページ送り）を表示
  dots: false,
  // ドットのclass名をつける
  dotsClass: 'dot-class',
  // ドラッグができるかどうか
  draggable: true,
  // 切り替え時のフェードイン設定。trueでon
  fade: false,
  // 左右の次へ、前へボタンを表示するかどうか
  arrows: true,
  // 無限スクロールにするかどうか。最後の画像の次は最初の画像が表示される。
  infinite: true,
  // 最初のスライダーの位置
  initialSlide: 0,
  // 画像の遅延表示。‘ondemand’or'progressive'
  lazyLoad: 'ondemand',
  // スライドのエリアにマウスオーバーしている間、自動再生を止めるかどうか。
  pauseOnHover: true
  // スライドのエリアに画像がいくつ表示されるかを指定
  slidesToShow: 4,
  // 一度にスライドする数
  slidesToScroll: 1,
  // タッチスワイプに対応するかどうか
  swipe: true,
  // 縦方向へのスライド
  vertical: false,
  // 表示中の画像を中央へ
  centerMode: true,
  // 中央のpadding
  centerPadding: '160px'
});
-->
<br>
　　<a href="https://kenwheeler.github.io/slick/" target="_blank">slick by Copyright (c) 2017 Ken Wheeler</a>

<hr>
<div style="text-align:center">
 <a href="http://urbanqee.com" target="_top">
 <img src="http://urbanqee.com/cgi-ssi/counter/wwwcount.cgi?hide+m3ico2_on.gif" border=0 title="HOME">
 </a>
 <br>
  <font color=gray><small><small>最終更新日</small>：2022. 5. 5</font></small>
</div>

</body>
</html>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Swiper 標準サンプル</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"
    />
    <!-- Link Swiper's CSS -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/swiper/swiper-bundle.min.css"
    />

    <!-- Demo styles -->
    <style>
      html,
      body {
        position: relative;
        height: 100%;
      }

      body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color: #000;
        margin: 0;
        padding: 0;
      }

      .swiper {
        width: 100%;
        height: 100%;
      }

      .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #f5f5f5;

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
      }

      .swiper-slide img {
        display: block;
        width: 960pv;
        height: 720px;
        object-fit: cover;
      }
    </style>
  </head>

  <body>
<h1 style="text-align:center">Swiper 標準サンプル</h1>
    <!-- Swiper -->
    <div class="swiper mySwiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="http://urbanqee.com/webutil/slideshow/img/rose-165819_960_720.jpg"></div>
        <div class="swiper-slide"><img src="http://urbanqee.com/webutil/slideshow/img/rose-pink-185961_960_720.jpg"></div>
        <div class="swiper-slide"><img src="http://urbanqee.com/webutil/slideshow/img/rose-3802424_960_720.jpg"></div>
        <div class="swiper-slide"><img src="http://urbanqee.com/webutil/slideshow/img/rose-2417334_960_720.jpg"></div>
        <div class="swiper-slide"><img src="http://urbanqee.com/webutil/slideshow/img/white-rose-2907862_960_720.jpg"></div>
      </div>
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>
      <div class="swiper-pagination"></div>
    </div>
<br>
<br>
  <a href="https://swiperjs.com/" target="_balnk">MIT Licensed Swiper </a>
<hr>
<div style="text-align:center">
 <a href="http://urbanqee.com" target="_top">
 <img src="http://urbanqee.com/cgi-ssi/counter/wwwcount.cgi?hide+m3ico2_on.gif" border=0 title="HOME">
 </a>
 <br>
  <font color=gray><small><small>最終更新日</small>：2022. 5. 5</font></small>
</div>

    <!-- Swiper JS -->
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

    <!-- Initialize Swiper -->
    <script>
      var swiper = new Swiper(".mySwiper", {
        cssMode: true,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        pagination: {
          el: ".swiper-pagination",
        },
        mousewheel: true,
        keyboard: true,
      });
    </script>
  </body>
</html>

・HTMLソースコード - 透かし（watermark）設定サンプル 
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta content="charset=utf-8">
<title>bxSlider 画像透かし（watermark）サンプル </title>

<!-- jQuery library (served from Google) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- bxslider JS CSS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.css" rel="stylesheet" />

<!--  watermark -->
<script src="jquery.watermark.min.js" type="text/javascript"></script>

<style>
body { 
    max-width: 800px;
    width:800px;
    margin: 0 auto;  
    padding: 0px; 
}

.my-bxslider1 > li {
    height: 340px;
}
/*
.my-bxslider1 > li > img {
    height: auto;
}

*/
</style>

<head>
<body style="">
<h2>bxSlider 画像透かし（watermark）サンプル</h2>

<div  class="my-bxslider1" id="bx-pager" style="width:600px">
  <div><img class="img_awesome" src="http://urbanqee.com/webutil/photo/fancybox3/people/girl-pixabay-04.jpg" title="女性 A" /></div>
  <div><img class="img_awesome" src="http://urbanqee.com/webutil/photo/fancybox3/people/girl-pixabay-09.jpg" title="女性 B" /></div>
  <div><img class="img_awesome" src="http://urbanqee.com/webutil/photo/fancybox3/people/girl-pixabay-07.jpg" title="女性 C" /></div>
  <div><img class="img_awesome" src="http://urbanqee.com/webutil/photo/fancybox3/people/girl-pixabay-03.jpg" title="女性 D" /></div>
  <div><img class="img_awesome" src="http://urbanqee.com/webutil/photo/fancybox3/people/girl-pixabay-12.jpg" title="女性 E" /></div>
</div>

<!-- watermark -->
<script>
$(function() {
 $('.img_awesome').watermark({
 path: 'http://urbanqee.com/webutil/photo/fancybox3/img/wartermark-2-2095933.png', //透かしに画像を使う場合はパスを入力
 //text: 'これは透かしのテキストです・・・', //透かしのテキスト
 textWidth: 300, //横幅
 textSize: 30,//フォントサイズ
 textColor: 'white', //テキストの色
 textBg: 'rgba(0, 0, 0, 0.4)', //背景色
 gravity: 'ne', //透かしのポジション The position of the watermark on the image (nw, n, ne, w, e, sw, s, se, c).
 opacity: 0.7, //透過度
 margin: 10, //余白
 });
});
</script>

<!-- bxslider 起動 -->
<script>
$(document).ready(function(){
    
 $('.my-bxslider1').bxSlider({
  //pagerCustom: '#bx-pager',
  mode: 'fade',
  captions: true, 
  auto: true,
  pause: 5000,
  slideWidth: 920
 });

});
</script>

<a href="https://bxslider.com/" target="_balnk">bxSlider by Steven Wanderski </a><br>
<a href="https://lelinhtinh.github.io/watermark/" target="_blank">jQuery plugin Watermark - MIT License (c) lelinhtinh</a>

<hr>
<div style="text-align:center">
 <a href="http://urbanqee.com" target="_top">
 <img src="http://urbanqee.com/cgi-ssi/counter/wwwcount.cgi?hide+m3ico2_on.gif" border=0 title="HOME">
 </a>
 <br>
  <font color=gray><small><small>最終更新日</small>：2022. 5. 5</font></small>
</div>

</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta content="charset=utf-8">
<title>bxSlider 文字透かし（watermark）サンプル </title>

<!-- jQuery library (served from Google) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- bxslider  -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.css" rel="stylesheet" />

<!--  watermark -->
<script src="jquery.watermark.min.js" type="text/javascript"></script>

<style>
body { 
    max-width: 800px;
    width:800px;
    margin: 0 auto;  
    padding: 0px; 
}

.my-bxslider1 > li {
    height: 340px;
}
/*
.my-bxslider1 > li > img {
    height: auto;
}

*/
</style>

<head>
<body style="">
<h2>bxSlider 文字透かし（watermark）サンプル</h2>

<div  class="my-bxslider1" id="bx-pager" style="width:600px">
  <div><img class="img_awesome" src="http://urbanqee.com/webutil/photo/fancybox3/people/girl-pixabay-04.jpg" title="女性 A" /></div>
  <div><img class="img_awesome" src="http://urbanqee.com/webutil/photo/fancybox3/people/girl-pixabay-09.jpg" title="女性 B" /></div>
  <div><img class="img_awesome" src="http://urbanqee.com/webutil/photo/fancybox3/people/girl-pixabay-07.jpg" title="女性 C" /></div>
  <div><img class="img_awesome" src="http://urbanqee.com/webutil/photo/fancybox3/people/girl-pixabay-03.jpg" title="女性 D" /></div>
  <div><img class="img_awesome" src="http://urbanqee.com/webutil/photo/fancybox3/people/girl-pixabay-12.jpg" title="女性 E" /></div>
</div>

<!-- watermark -->
<script>
$(function() {
 $('.img_awesome').watermark({
 //path: 'http://urbanqee.com/webutil/photo/fancybox3/img/wartermark-2-2095933.png', //透かしに画像を使う場合はパスを入力
 text: '透かしのテキスト DRAFT', //透かしのテキスト
 textWidth: 500, //横幅
 textSize: 36,//フォントサイズ
 textColor: 'white', //テキストの色
 textBg: 'rgba(0, 0, 0, 0.4)', //背景色
 gravity: 'c', //透かしのポジション The position of the watermark on the image (nw, n, ne, w, e, sw, s, se, c).
 opacity: 0.7, //透過度
 margin: 10, //余白
 });
});
</script>

<!-- bxslider 起動 -->
<script>
$(document).ready(function(){
    
 $('.my-bxslider1').bxSlider({
  //pagerCustom: '#bx-pager',
  mode: 'fade',
  captions: true, 
  auto: true,
  pause: 5000,
  slideWidth: 920
 });

});
</script>

<a href="https://bxslider.com/" target="_balnk">bxSlider by Steven Wanderski </a><br>
<a href="https://lelinhtinh.github.io/watermark/" target="_blank">jQuery plugin Watermark - MIT License (c) lelinhtinh</a>

<hr>
<div style="text-align:center">
 <a href="http://urbanqee.com" target="_top">
 <img src="http://urbanqee.com/cgi-ssi/counter/wwwcount.cgi?hide+m3ico2_on.gif" border=0 title="HOME">
 </a>
 <br>
  <font color=gray><small><small>最終更新日</small>：2022. 5. 5</font></small>
</div>
    
</body>
</html> 
<!DOCTYPE html>
<html>
<head>
<title>slick 画像透かし（watermark）サンプル</title>
<meta charset="UTF-8">

 <!-- jQuery -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

<!-- Add the slick-theme.css if you want default styling -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<!-- Add the slick-theme.css if you want default styling -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>

<!-- jQuery plugin Watermark -->
<script src="jquery.watermark.min.js" type="text/javascript"></script>


  <style type="text/css">
    html, body {
      margin: 0;
      padding: 0;
    }

    * {
      box-sizing: border-box;
    }

    .slider {
        width: 50%;
        margin: 20px auto;  /* 100px */
    }

    .slick-slide {
      margin: 0px 20px;
    }

    .slick-slide img {
      width: 100%;
    }

    .slick-prev:before,
    .slick-next:before {
      color: black;
    }


    .slick-slide {
      transition: all ease-in-out .3s;
      opacity: .2;
    }
    
    .slick-active {
      opacity: .5;
    }

    .slick-current {
      opacity: 1;
    }
  </style>
</head>
<body>
<h1 style="text-align:center">slick 画像透かし（watermark）サンプル</h1>

  <section class="regular slider">
    <div>
      <img src="http://urbanqee.com/webutil/photo/fancybox3/people/girl-pixabay-11.jpg" class="mark">
    </div>
    <div>
      <img src="http://urbanqee.com/webutil/photo/fancybox3/people/girl-pixabay-12.jpg" class="mark">
    </div>
    <div>
      <img src="http://urbanqee.com/webutil/photo/fancybox3/people/girl-pixabay-13.jpg" class="mark">
    </div>
    <div>
      <img src="http://urbanqee.com/webutil/photo/fancybox3/people/girl-pixabay-14.jpg" class="mark">
    </div>
    <div>
      <img src="http://urbanqee.com/webutil/photo/fancybox3/people/girl-pixabay-09.jpg" class="mark">
    </div>
    <div>
      <img src="http://urbanqee.com/webutil/photo/fancybox3/people/girl-pixabay-16.jpg" class="mark">
    </div>
  </section>



<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<!--  <script src="./slick/slick.js" type="text/javascript" charset="utf-8"></script> -->


<script>
$(function() {
  $('.mark').watermark({
    path: 'http://urbanqee.com/webutil/photo/fancybox3/img/wartermark-2-2095933.png',     //'https://i.imgur.com/LcpZHu5.png',
    gravity: 'c', //透かしのポジション The position of the watermark on the image (nw, n, ne, w, e, sw, s, se, c).
  });
});
</script>


<script type="text/javascript">
$(function() {
      $(".regular").slick({
        autoplay: true,
        autoplaySpeed: 5000,
        dots: true,
        infinite: true,
        slidesToShow: 1,
        slidesToScroll: 1
      });
 });
</script>

<!--
$('.slider').slick({
  // アクセシビリティ。左右ボタンで画像の切り替えをできるかどうか
  accessibility: true,
  // 自動再生。trueで自動再生される。
  autoplay: false,
  // 自動再生で切り替えをする時間
  autoplaySpeed: 3000,
  // 自動再生や左右の矢印でスライドするスピード
  speed: 400,
  // 自動再生時にスライドのエリアにマウスオンで一時停止するかどうか
  pauseOnHover: true,
  // 自動再生時にドットにマウスオンで一時停止するかどうか
  pauseOnDotsHover: true,
  // 切り替えのアニメーション。ease,linear,ease-in,ease-out,ease-in-out
  cssEase: 'ease',
  // 画像下のドット（ページ送り）を表示
  dots: false,
  // ドットのclass名をつける
  dotsClass: 'dot-class',
  // ドラッグができるかどうか
  draggable: true,
  // 切り替え時のフェードイン設定。trueでon
  fade: false,
  // 左右の次へ、前へボタンを表示するかどうか
  arrows: true,
  // 無限スクロールにするかどうか。最後の画像の次は最初の画像が表示される。
  infinite: true,
  // 最初のスライダーの位置
  initialSlide: 0,
  // 画像の遅延表示。‘ondemand’or'progressive'
  lazyLoad: 'ondemand',
  // スライドのエリアにマウスオーバーしている間、自動再生を止めるかどうか。
  pauseOnHover: true
  // スライドのエリアに画像がいくつ表示されるかを指定
  slidesToShow: 4,
  // 一度にスライドする数
  slidesToScroll: 1,
  // タッチスワイプに対応するかどうか
  swipe: true,
  // 縦方向へのスライド
  vertical: false,
  // 表示中の画像を中央へ
  centerMode: true,
  // 中央のpadding
  centerPadding: '160px'
});
-->

　　<a href="https://kenwheeler.github.io/slick/" target="_blank">Copyright (c) 2017 Ken Wheeler</a><br>
　　<a href="https://lelinhtinh.github.io/watermark/" target="_blank">jQuery plugin Watermark - MIT License (c) lelinhtinh</a>

<hr>
<div style="text-align:center">
 <a href="http://urbanqee.com" target="_top">
 <img src="http://urbanqee.com/cgi-ssi/counter/wwwcount.cgi?hide+m3ico2_on.gif" border=0 title="HOME">
 </a>
 <br>
  <font color=gray><small><small>最終更新日</small>：2022. 5. 5</font></small>
</div>

</body>
</html> 
<!DOCTYPE html>
<html>
<head>
<title>slick 文字透かし（watermark）サンプル）</title>
<meta charset="UTF-8">

 <!-- jQuery -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

<!-- Add the slick-theme.css if you want default styling -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<!-- Add the slick-theme.css if you want default styling -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>

<!-- jQuery plugin Watermark -->
<script src="jquery.watermark.min.js" type="text/javascript"></script>

  <style type="text/css">
    html, body {
      margin: 0;
      padding: 0;
    }

    * {
      box-sizing: border-box;
    }

    .slider {
        width: 50%;
        margin: 20px auto;  /* 100px */
    }

    .slick-slide {
      margin: 0px 20px;
    }

    .slick-slide img {
      width: 100%;
    }

    .slick-prev:before,
    .slick-next:before {
      color: black;
    }

    .slick-slide {
      transition: all ease-in-out .3s;
      opacity: .2;
    }
    
    .slick-active {
      opacity: .5;
    }

    .slick-current {
      opacity: 1;
    }
  </style>
</head>
<body>
<h1 style="text-align:center">slick 文字透かし（watermark）サンプル</h1>

  <section class="regular slider">
    <div>
      <img src="http://urbanqee.com/webutil/photo/fancybox3/people/girl-pixabay-11.jpg" class="mark">
    </div>
    <div>
      <img src="http://urbanqee.com/webutil/photo/fancybox3/people/girl-pixabay-12.jpg" class="mark">
    </div>
    <div>
      <img src="http://urbanqee.com/webutil/photo/fancybox3/people/girl-pixabay-13.jpg" class="mark">
    </div>
    <div>
      <img src="http://urbanqee.com/webutil/photo/fancybox3/people/girl-pixabay-14.jpg" class="mark">
    </div>
    <div>
      <img src="http://urbanqee.com/webutil/photo/fancybox3/people/girl-pixabay-09.jpg" class="mark">
    </div>
    <div>
      <img src="http://urbanqee.com/webutil/photo/fancybox3/people/girl-pixabay-16.jpg" class="mark">
    </div>
  </section>

<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<!--  <script src="./slick/slick.js" type="text/javascript" charset="utf-8"></script> -->

<!-- watermark -->
<script>
$(function() {
 $('.mark').watermark({
 //path: 'http://urbanqee.com/webutil/photo/fancybox3/img/wartermark-2-2095933.png', //透かしに画像を使う場合はパスを入力
 text: '透かしのテキスト DRAFT', //透かしのテキスト
 textWidth: 500, //横幅
 textSize: 36,//フォントサイズ
 textColor: 'white', //テキストの色
 textBg: 'rgba(0, 0, 0, 0.4)', //背景色
 gravity: 'c', //透かしのポジション The position of the watermark on the image (nw, n, ne, w, e, sw, s, se, c).
 opacity: 0.7, //透過度
 margin: 10, //余白
 });
});
</script>

<!-- slick 起動 -->
<script type="text/javascript">
$(function() {
      $(".regular").slick({
        autoplay: true,
        autoplaySpeed: 5000,
        dots: true,
        infinite: true,
        slidesToShow: 1,
        slidesToScroll: 1
      });
 });
</script>

<!--
$('.slider').slick({
  // アクセシビリティ。左右ボタンで画像の切り替えをできるかどうか
  accessibility: true,
  // 自動再生。trueで自動再生される。
  autoplay: false,
  // 自動再生で切り替えをする時間
  autoplaySpeed: 3000,
  // 自動再生や左右の矢印でスライドするスピード
  speed: 400,
  // 自動再生時にスライドのエリアにマウスオンで一時停止するかどうか
  pauseOnHover: true,
  // 自動再生時にドットにマウスオンで一時停止するかどうか
  pauseOnDotsHover: true,
  // 切り替えのアニメーション。ease,linear,ease-in,ease-out,ease-in-out
  cssEase: 'ease',
  // 画像下のドット（ページ送り）を表示
  dots: false,
  // ドットのclass名をつける
  dotsClass: 'dot-class',
  // ドラッグができるかどうか
  draggable: true,
  // 切り替え時のフェードイン設定。trueでon
  fade: false,
  // 左右の次へ、前へボタンを表示するかどうか
  arrows: true,
  // 無限スクロールにするかどうか。最後の画像の次は最初の画像が表示される。
  infinite: true,
  // 最初のスライダーの位置
  initialSlide: 0,
  // 画像の遅延表示。‘ondemand’or'progressive'
  lazyLoad: 'ondemand',
  // スライドのエリアにマウスオーバーしている間、自動再生を止めるかどうか。
  pauseOnHover: true
  // スライドのエリアに画像がいくつ表示されるかを指定
  slidesToShow: 4,
  // 一度にスライドする数
  slidesToScroll: 1,
  // タッチスワイプに対応するかどうか
  swipe: true,
  // 縦方向へのスライド
  vertical: false,
  // 表示中の画像を中央へ
  centerMode: true,
  // 中央のpadding
  centerPadding: '160px'
});
-->

　　<a href="https://kenwheeler.github.io/slick/" target="_blank">Copyright (c) 2017 Ken Wheeler</a><br>
　　<a href="https://lelinhtinh.github.io/watermark/" target="_blank">jQuery plugin Watermark - MIT License (c) lelinhtinh</a>

<hr>
<div style="text-align:center">
 <a href="http://urbanqee.com" target="_top">
 <img src="http://urbanqee.com/cgi-ssi/counter/wwwcount.cgi?hide+m3ico2_on.gif" border=0 title="HOME">
 </a>
 <br>
  <font color=gray><small><small>最終更新日</small>：2022. 5. 5</font></small>
</div>

</body>
</html> 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Swiper 画像透かし（watermark）サンプル</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
    <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />

    <!-- Demo styles -->
    <style>
      html,
      body {
        position: relative;
        height: 100%;
      }

      body {
        background: #f5f5f5;           /*#eee;*/
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color: #000;
        margin: 0;
        padding: 0;
      }

      .swiper {
        width: 100%;
        height: 100%;
      }

      .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #f5f5f5;

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
      }

      .swiper-slide img {
        display: block;
        width: 960pv;
        height: 720px;
        object-fit: cover;
      }
    </style>

<!-- jQuery 1.5+ -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<!-- jQuery plugin Watermark -->
<script src="https://unpkg.com/watermark@1.0.2/dist/jquery.watermark.min.js" type="text/javascript"></script>

  </head>
  <body>
<h1 style="text-align:center">Swiper 画像透かし（watermark）サンプル</h1>
    <!-- Swiper -->
    <div class="swiper mySwiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="http://urbanqee.com/webutil/slideshow/img/rose-165819_960_720.jpg" class="img_awesome" ></div>
        <div class="swiper-slide"><img src="http://urbanqee.com/webutil/slideshow/img/rose-pink-185961_960_720.jpg" class="img_awesome" ></div>
        <div class="swiper-slide"><img src="http://urbanqee.com/webutil/slideshow/img/rose-3802424_960_720.jpg" class="img_awesome" ></div>
        <div class="swiper-slide"><img src="http://urbanqee.com/webutil/slideshow/img/rose-2417334_960_720.jpg" class="img_awesome" ></div>
        <div class="swiper-slide"><img src="http://urbanqee.com/webutil/slideshow/img/white-rose-2907862_960_720.jpg" class="img_awesome" ></div>
      </div>
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>
      <div class="swiper-pagination"></div>
    </div>
<br>
<br>
  <a href="https://swiperjs.com/" target="_balnk">MIT Licensed Swiper </a><br>
<a href="https://lelinhtinh.github.io/watermark/" target="_blank">jQuery plugin Watermark - MIT License (c) lelinhtinh</a>
<hr>
<div style="text-align:center">
 <a href="http://urbanqee.com" target="_top">
 <img src="http://urbanqee.com/cgi-ssi/counter/wwwcount.cgi?hide+m3ico2_on.gif" border=0 title="HOME">
 </a>
 <br>
  <font color=gray><small><small>最終更新日</small>：2022. 5. 5</font></small>
</div>

    <!-- Swiper JS -->
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

    <!-- Initialize Swiper -->
    <script>
      var swiper = new Swiper(".mySwiper", {
        cssMode: true,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        pagination: {
          el: ".swiper-pagination",
        },
        mousewheel: true,
        keyboard: true,
      });
    </script>

<!-- watermark -->
<script>
$(function() {
  $('.img_awesome').watermark({
    path: 'http://urbanqee.com/webutil/photo/fancybox3/img/wartermark-2-2095933.png',
    gravity: 'n', //透かしのポジション The position of the watermark on the image (nw, n, ne, w, e, sw, s, se, c).
  });
});
</script>

  </body>
</html> 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Swiper 文字透かし（watermark）サンプル</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
    <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />

    <!-- Demo styles -->
    <style>
      html,
      body {
        position: relative;
        height: 100%;
      }

      body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color: #000;
        margin: 0;
        padding: 0;
      }

      .swiper {
        width: 100%;
        height: 100%;
      }

      .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
      }

      .swiper-slide img {
        display: block;
        width: 960pv;
        height: 720px;
        object-fit: cover;
      }
    </style>

<!-- jQuery 1.5+ -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<!-- jQuery plugin Watermark -->
<script src="https://unpkg.com/watermark@1.0.2/dist/jquery.watermark.min.js" type="text/javascript"></script>

  </head>
  <body>
<h1 style="text-align:center">Swiper 文字透かし（watermark）サンプル</h1>
    <!-- Swiper -->
    <div class="swiper mySwiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="http://urbanqee.com/webutil/slideshow/img/rose-165819_960_720.jpg" class="img_awesome" ></div>
        <div class="swiper-slide"><img src="http://urbanqee.com/webutil/slideshow/img/rose-pink-185961_960_720.jpg" class="img_awesome" ></div>
        <div class="swiper-slide"><img src="http://urbanqee.com/webutil/slideshow/img/rose-3802424_960_720.jpg" class="img_awesome" ></div>
        <div class="swiper-slide"><img src="http://urbanqee.com/webutil/slideshow/img/rose-2417334_960_720.jpg" class="img_awesome" ></div>
        <div class="swiper-slide"><img src="http://urbanqee.com/webutil/slideshow/img/white-rose-2907862_960_720.jpg" class="img_awesome" ></div>
<!--
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        <div class="swiper-slide">Slide 4</div>
        <div class="swiper-slide">Slide 5</div>
        <div class="swiper-slide">Slide 6</div>
        <div class="swiper-slide">Slide 7</div>
        <div class="swiper-slide">Slide 8</div>
        <div class="swiper-slide">Slide 9</div>-->
      </div>
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>
      <div class="swiper-pagination"></div>
    </div>

<br>
  <a href="https://swiperjs.com/" target="_balnk">MIT Licensed Swiper </a><br>
<a href="https://lelinhtinh.github.io/watermark/" target="_blank">jQuery plugin Watermark - MIT License (c) lelinhtinh</a>
<hr>
<div style="text-align:center">
 <a href="http://urbanqee.com" target="_top">
 <img src="http://urbanqee.com/cgi-ssi/counter/wwwcount.cgi?hide+m3ico2_on.gif" border=0 title="HOME">
 </a>
 <br>
  <font color=gray><small><small>最終更新日</small>：2022. 5. 5</font></small>
</div>

    <!-- Swiper JS -->
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

    <!-- Initialize Swiper -->
    <script>
      var swiper = new Swiper(".mySwiper", {
        cssMode: true,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        pagination: {
          el: ".swiper-pagination",
        },
        mousewheel: true,
        keyboard: true,
      });
    </script>

<!-- watermark -->
<script>
$(function(){
  $('.img_awesome').watermark({
 text: 'これは透かしのテキストです・・・', //透かしのテキスト
 textWidth: 500, //横幅
 textSize: 30,//フォントサイズ
 textColor: 'white', //テキストの色
 textBg: 'rgba(0, 0, 0, 0.4)', //背景色
 gravity: 'c', //透かしのポジション The position of the watermark on the image (nw, n, ne, w, e, sw, s, se, c).
 opacity: 0.7, //透過度
 margin: 10, //余白  
 });
});
</script>

  </body>
</html>

● Wartermark（透かし）作成デモ

Wartermark（透かし）の作成をオンラインで行うことができます。



インストール｜jQueryのインクルード｜基本的な使い方｜これまでのまとめ｜ スライドショーの画像に透かしを入れる（応用編）｜Wartermark（透かし）作成デモ｜TOP



 最終更新日：2022. 5.15