watermark.js | Image watermarks with HTMLCanvas and Javascript

HTMLCanvasとJavaScriptで画像にウォーターマークを入れられる「watermark.js」
ウォーターマークっていうのは、画像の著作権表示なんかを画像上に表示させてるやつです。
元画像はソースを開けばアドレスが直に書かれているのでバレてしまうのでプロテクションとしては弱いので注意が必要ですが、仕組みとしては面白いですね。

左上にうっすら水滴っぽいものが出ているのがウォーターマークです。
ウォーターマーク



元画像は以下。



ウォーターマーク用の画像を別途容易しておいて引数で渡してあげるという使い方です。



画像合成をブラウザ上でやっちゃう、という技術を利用しているので他にも応用が効きそうですね。

Firefox 3.6, Chrome, Opera 11, IE9に対応。

関連エントリ

• 画像にウォーターマークを追加してコピーライト表示を追加するPhotoshopアクション作成