整体实现思路是通过span标签覆盖在canvas上方,同时在span的位置处canvas绘制同样的水印文字。这样通过邮件保存的图片中是包含水印的。获得span的位置有两点需要注意。一是canvas的baseline要设置成top。而是span要规定行高。建议和字体一致。
cxt.textBaseline = ‘top’;//基线设置为向上对齐 重点!!!
cxt.textAlign = ‘left’;
left = parseFloat($(‘#textAdd’).css(“left”))//需要注意的是span元素应设置行高和字体大小一致。否则位置会有偏差。
top = parseFloat($(‘#textAdd’).css(“top”))
cxt.fillText(text,left,top);
整体的效果图和代码如下:
增加