canvas添加水印

最新推荐文章于 2024-06-14 11:29:32 发布

weixin_30603633

最新推荐文章于 2024-06-14 11:29:32 发布

阅读量70

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/founderswitch/p/7243702.html

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

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;
}