画像上に指定の画像をうっすら重ねられるJavaScript「watermark.js」

画像をダウンロードされたくないんだよねーといってとりあえず右クリック禁止にしているようなサイトもあります。
そんなユーにオススメのwatermark.js | Image watermarks with HTMLCanvas and Javascriptです。
canvasを利用して画像に指定の画像をうっすら表示できます。
さらに右クリックで画像表示をしてもウォーターマークがついてきます。
IEは9以降。。
画像上に指定の画像をうっすら重ねられるJavaScript「watermark.js」サンプル

使用方法
watermark.jsからファイル一式をダウンロード。
<script src="watermark.js" type="text/javascript"></script>
<script>
var load = false;
window.onload = function(){
if(!load) {
wmark.init({
"position": "bottom-right", // のっける画像の位置:"top-left"|"top-right"|"bottom-right"|"bottom-left"
"opacity": 30, // のっける画像の透明度:デフォ 50
"className": "watermark", // 適用する画像のclass名:デフォ "watermark"
"path": "ウォーターマークの画像パス"
});
load = true;
}
}
</script>

あとは上記で指定したclassを画像に付与すれば完成です。
<img src="画像パス" class="watermark" />

画像上に指定の画像をうっすら重ねられるJavaScript「watermark.js」サンプル

sponsors

「画像上に指定の画像をうっすら重ねられるJavaScript「watermark.js」」をシェアする

記事作成:
記事URL:

TOP > > > 画像上に指定の画像をうっすら重ねられるJavaScript「watermark.js」