画像に透かしを入れることができるjQueryプラグイン「Watermark」

※2018/11/09追記
Watermarkの配布ページはなくなっていました。提供終了したようです。

Watermarkは、画像に透かしを入れることができるjQueryプラグインです。

プラグインの配布ページでデモを確認することができます。

スポンサードリンク

Watermarkの使い方

プラグインファイルのダウンロードと設置

まずは、配布ページからプラグインファイルをダウンロードします。[Download .zip]をクリックすると、ファイル一式をダウンロードすることができます。

ダウンロードしたファイルを解凍し、distフォルダ内にあるjquery.watermark.min.jsをサーバーに設置します。

jQueryとWatermarkのロード

HTMLファイルに以下を記述して、jQueryとWatermarkをロードします。


&lt;script src=&quot;//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;jquery.watermark.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;

記述する場所は<head>～</head>内もしくは</body>の直前でOKです。

画像へのクラス追加とスクリプトの記述

画像には、以下のようにクラスを追加しておきます。


&lt;img class=&quot;img_awesome&quot; src=&quot;img/1.jpg&quot; alt=&quot;&quot; /&gt;
&lt;img class=&quot;img_awesome&quot; src=&quot;img/2.jpg&quot; alt=&quot;&quot; /&gt;
&lt;img class=&quot;img_awesome&quot; src=&quot;img/3.jpg&quot; alt=&quot;&quot; /&gt;

続いて、以下のようなスクリプトを</body>の直前に記述します。

&lt;script&gt;
$(function() {
 $('.img_awesome').watermark({
 path: 'watermark.png', //透かしに画像を使う場合はパスを入力
 text: '透かしのテキスト', //透かしのテキスト
 textWidth: 130, //横幅
 textSize: 12,//フォントサイズ
 textColor: 'white', //テキストの色
 textBg: 'rgba(0, 0, 0, 0.4)', //背景色
 gravity: 'se', //透かしのポジション
 opacity: 0.7, //透過度
 margin: 10, //余白
 });
});
&lt;/script&gt;

スクリプトは、jQueryとWatermarkのロードよりも後に記述するようにしましょう。img_awesomeというクラスが付いた画像に透かしが入るようになります。

不要なオプションは省略してOKです。オプションについての詳細は、プラグインの配布サイトをご参照ください。

スクリプトの記述まで完了したら、画像を確認してみましょう。ちょっとわかりにくいですが、以下のように透かしが入っていると思います。

あとがき

とても簡単に透かしを入れることができますね。

右クリックからダウンロードした場合も透かしが入った状態でダウンロードされます。自サイトの写真を無断で使われたくない時は、透かしは対策として非常に有効です。

画像に透かしを入れることができるjQueryプラグイン「Watermark」