できる! ウォーターマーク(透かし)を画像に入れる方法
- 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 WatermarkMIT 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>

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

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

 使い方

スライドショーの画像に透かしを入れる方法は、bxSliderslick および 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>

・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>

● Wartermark(透かし)作成デモ

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



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





 最終更新日:2022. 5.15
アクセス解析