canvas实现图片加水印-526互联

前言：有时候需要在一张图片上添加文字水印，形成新的图片，便于1 vs 多的分享。

html中：

<img src="" alt=""  id="newImg" />
<canvas id="myCanvas" class="hidden"  ></canvas>

js中:

引入 jquery.qrcode.min.js 后

function Img(){   //图片加水印
    //准备img对象 
    var img = new Image();
    img.src = 'images/***.png';//这里是需要添加水印的背景图路径           
    var canvas=document.getElementById("myCanvas");
    var ctx=canvas.getContext("2d");
    // 加载完成开始绘制
    img.onload=function(){
        //准备canvas环境 
       canvas.width=img.width;
       canvas.height=img.height;
       // 绘制图片
       ctx.drawImage(img,0,0);
       // 绘制水印
       ctx.font="14px microsoft yahei";
       ctx.fillStyle = "rgb(245,245,245)";
       ctx.fillText("欢迎您****",42,182);
      var dataURL = canvas.toDataURL("image/png");
      $("#newImg").attr("src",dataURL) //展示添加水印后的图片
	}
}

调用方法 Img() 即可看到添加水印后的新图片