canvas添加水印

Posted 2020-09-30 Mr.方

<canvas id="canvas"></canvas>
<canvas id="water"></canvas>
<img src="" id="imgShow" />

var ca = document.getElementById("canvas");
var ctx = ca.getContext("2d");

var water = document.getElementById("water");
var waterCtx = water.getContext("2d");

var imgShow = document.getElementById("imgShow");

ca.width = 900;
ca.height = 600;

water.width = 200;
water.height = 50;

var img = new Image();

img.src = "img.jpg";

// 水印canvas的样式
waterCtx.font = "30px Aril bold";
waterCtx.fillStyle = "rgba(0,0,0,.3)";
waterCtx.textBaseline = "midddle";
waterCtx.fillText("芳芳芳芳付", 20, 30);

// 图片加载完后，去执行其他操作
img.onload = function(){
    ctx.drawImage(img,ca.width - img.width,ca.height - img.height);
    ctx.drawImage(water,ca.width - water.width,ca.height - water.height);
    var imgOut = ca.toDataURL("image/jpeg");
    imgShow.src = imgOut;
}