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>
サンプル
