画像の保護に。JavaScript/Canvasを使って動的に電子透かしを入れる「watermark.js」 // MOONGIFT Archived

watermark.jsはHTML5/Canvasを使って画像に動的に透かしを入れるソフトウェア。

watermark.jsはJavaScript製のオープンソース・ソフトウェア。ECサイトやメディアサイトでは画像に透かしを入れて表示している場合がある。社名や自社のロゴを載せることで、転載を防止または抑制する仕組みだ。

画像の左上のマークが透かし

大手のサイトであれば画像を自動的に変換するシステムを導入しているかもしれない。だがwatermark.jsであれば個人や小規模なサイトでも簡単な透かしシステムを導入できるようになる。

watermark.jsはJavaScriptとHTML5のCanvasタグを使って画像を動的に変換する。別途画像を指定することで、その画像を表示したい画像に上書きする形で表示する。透明度、表示位置、クラス名を指定することで細かく表示を制御できるようになっている。

元画像にはマークはない

表示している画像の中でクラス名にwatermarkという指定があるものだけを変換対象にするといったことも簡単にできる。HTML5への対応が必要とあって、対応WebブラウザはFirefox3.6以上、Google Chrome、Opera 11、IE 9以上、さらにiPadでの動作も可能とのことだ。

MOONGIFTはこう見る

画像が自社の強みであり、著作権を保持するようなサイトであればwatermark.jsのような仕組みはぜひ入れておくべきだろう。ECサイトでも転売する際にそのまま画像を使われるケースも多いので、対応策として使ってみるのも良い。

watermark.jsでは画像を動的に変換しているので、右クリックして画像のURLをコピーしようとするとパスではなくdata URIになるのが特徴だ。原理を知っている人には使えないかもしれないが、ないよりはマシだろう。自社コンテンツの保護に使ってみるといいだろう。