html5 canvas实现给图片添加平铺水印前端水印的简单实现代码示例前端canvas水印快速制作（附完整代码)手摸手教你用canvas实现给图片添加平铺水印的实现canvas 下载二维码和图片加水印的方法前端使用canvas生成盲水印的加密解密的实现

 var img = new Image(); // 因为我项目中的业务是，要把淘宝的图片添加水印，所以这里就放一个淘宝商品的主图 img.src = 'https://gd4.alicdn.com/imgextra/i3/155/O1CN01XKkJqL1D11wYZbeI2_!!155-0-lubanu.jpg_400x400.jpg'; img.onload = () => { // 准备canvas环境 var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); // 先把图片绘制到canvas上 ctx.drawImage(img, 0, 0, 200, 200); // 绘制水印到canvas上 for (let i = 0; i < 20; i++) { ctx.rotate((-45 * Math.PI) / 180); // 水印初始偏转角度 ctx.font = "20px microsoft yahei"; ctx.fillStyle = "rgba(0,0,0,0.5)"; ctx.fillText("mmmmmmmmmmmmmmmmmmmmmmm",-300,i * 25); ctx.rotate((45 * Math.PI) / 180); // 把水印偏转角度调整为原来的，不然他会一直转 }

 var img = new Image(); // 因为我项目中的业务是，要把淘宝的图片添加水印，所以这里就放一个淘宝商品的主图 img.setAttribute("crossorigin", "crossorigin");// 这句代码是为了解决跨域问题，如果你的图片是自己的，没有跨域问题可以去掉 img.src = 'https://gd4.alicdn.com/imgextra/i3/155/O1CN01XKkJqL1D11wYZbeI2_!!155-0-lubanu.jpg_400x400.jpg';