Canvas 画像に透かしを設定

HTML5のCanvasで画像に透かし(ウォーターマーク)を追加する設定

透かしに使う画像(watermark.png)を用意。

jQuery

$(function () { $(document).ready(function () { draw('cat', 'jpg'); }); function draw(id, ext) { var ctx = $('#' + id)[0].getContext('2d'); // 透かし var waterMark = new Image(); waterMark.src = '/img/watermark.png'; // 画像 var img = new Image(); img.src = '/img/' + id + '.' + ext; img.onload = function() { ctx.drawImage(img, 0, 0); ctx.drawImage(waterMark, (img.width - waterMark.width) / 2, (img.height - waterMark.height) / 2); // 枠線 ctx.rect(5, 5, img.width - 10, img.height - 10); ctx.strokeStyle = '#fff'; ctx.lineWidth = '1'; ctx.closePath(); ctx.stroke(); } } });

IDと画像名(拡張子除く)は同一に。

HTML

<canvas id="cat" width="450" height="340"></canvas>

サンプル

最新の記事

プロフィール

流されるままにウェブ業界で仕事しています。主にLAPP環境でPHPを書いています。最近はjQueryで遊んでいます。
※動作確認について