场景
实际工作中，我们会遇到给图片加水印的效果，比如给用户颁发电子证书要在证书上写下证书的名字，我们可以使用h5的canvas来解决这个问题。
解决
例子：给证书上显示用户名字并下载
// @params1 cavans的id值// @params2 图片的url路径// @params3 要绘制的文字// @params4 水印位置x,yfunction 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","///gitrepo/pengyang_/dist/images/cre-temp-img.png","张同学",730,555);
关于canvas的插件推荐
适用于签名：/szimek/signature_pad
