ITエンジニア/デザイナ向けにオープンソースを毎日紹介

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になるのが特徴だ。原理を知っている人には使えないかもしれないが、ないよりはマシだろう。自社コンテンツの保護に使ってみるといいだろう。

via Watermark - Create Image Watermarks With Canvas and Javascript | blogfreakz.com

watermark.js | Image watermarks with HTMLCanvas and Javascript

デモ:watermark.js basic demo

pa7/watermark.js - GitHub

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2