js：用canvas给图片加水印，签名等

场景

实际工作中，我们会遇到给图片加水印的效果，比如给用户颁发电子证书要在证书上写下证书的名字，我们可以使用h5的canvas来解决这个问题。

解决

例子：给证书上显示用户名字并下载

// @params1 cavans的id值
// @params2 图片的url路径
// @params3 要绘制的文字
// @params4 水印位置x,y
function waterMark(canvasid,imgurl,addtext,x,y){
    var img = new Image ;
    
    img.setAttribute("crossOrigin",'Anonymous');
    var canvas = document.getElementById(canvasid);
    var ctx = canvas.getContext("2d");
    // ctx.clearRect(0, 0, canvas.width, canvas.height);
    // canvas.height=canvas.height;
	img.onload = function(){
        canvas.style.letterSpacing = '10px';
        var _w = img.naturalWidth;
        var _h = img.naturalHeight;  
		canvas.setAttribute('width',_w);
		canvas.setAttribute('height',_h);
		ctx.drawImage(img,0,0);
		ctx.font = "35px 微软雅黑";
		ctx.fillStyle = "rgb(218,171,115)";
        ctx.fillText(addtext,x,y); //选择位置
        var imageSrc = canvas.toDataURL("image/png");
        let a = document.createElement("a");
        a.href = imageSrc;
        a.download = addtext;
        a.click();
    }  
    img.src = imgurl; 
}
// 调用
waterMark("waterMarkTest","//assets.dxycdn.com/gitrepo/pengyang_2018/dist/images/cre-temp-img.png","张同学",730,555);

关于canvas的插件推荐

适用于签名：https://github.com/szimek/signature_pad