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

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

スポンサードリンク
画像に透かしを入れることができるjQueryプラグイン「Watermark」
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加

  • 広告主様募集中
    ワンコインで広告掲載してみませんか?
  • このエントリーをはてなブックマークに追加

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

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

Watermarkの使い方

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

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

Watermarkのダウンロード

ダウンロードしたファイルを解凍し、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です。オプションについての詳細は、プラグインの配布サイトをご参照ください。

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

透かしの表示

あとがき

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

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

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。