※2018/11/09追記
Watermarkの配布ページはなくなっていました。提供終了したようです。
Watermarkの配布ページはなくなっていました。提供終了したようです。
Watermarkは、画像に透かしを入れることができるjQueryプラグインです。
プラグインの配布ページでデモを確認することができます。
Watermarkの使い方
プラグインファイルのダウンロードと設置
まずは、配布ページからプラグインファイルをダウンロードします。[Download .zip]をクリックすると、ファイル一式をダウンロードすることができます。
ダウンロードしたファイルを解凍し、distフォルダ内にあるjquery.watermark.min.jsをサーバーに設置します。
jQueryとWatermarkのロード
HTMLファイルに以下を記述して、jQueryとWatermarkをロードします。
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="jquery.watermark.min.js" type="text/javascript"></script>
記述する場所は<head>～</head>内もしくは</body>の直前でOKです。
画像へのクラス追加とスクリプトの記述
画像には、以下のようにクラスを追加しておきます。
<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="" />
続いて、以下のようなスクリプトを</body>の直前に記述します。
<script>
$(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, //余白
});
});
</script>
スクリプトは、jQueryとWatermarkのロードよりも後に記述するようにしましょう。img_awesomeというクラスが付いた画像に透かしが入るようになります。
不要なオプションは省略してOKです。オプションについての詳細は、プラグインの配布サイトをご参照ください。
スクリプトの記述まで完了したら、画像を確認してみましょう。ちょっとわかりにくいですが、以下のように透かしが入っていると思います。
あとがき
とても簡単に透かしを入れることができますね。
右クリックからダウンロードした場合も透かしが入った状態でダウンロードされます。自サイトの写真を無断で使われたくない時は、透かしは対策として非常に有効です。