前端小程序——js+canvas 给图片添加水印

Posted 2020-10-02 zhengyan_web

市场上各种各样的图片处理器有很多，那么作为程序员的我们是不是应该自己做一个呢？那就从加水印开始吧

html：

<canvas id="shuiyinTest">

</canvas>

<div>

<input id="shuiyinText" value="" type="text"/>

<button id="shuiyinBtn" class="mui-btn mui-btn-primary" type="button"> 点击添加水印</button>

</div>

画完页面就是这个样子了：

加上js处理：

/*加水印*/

function shuiyin(canvasid,imgurl,addtext){

var img = new Image ;

img.src = imgurl;

img.onload = function(){

var canvas = document.getElementById(canvasid);

var ctx = canvas.getContext("2d");

ctx.drawImage(img,0,0);

ctx.font = "14px 微软雅黑";

ctx.fillStyle = "rgba(252,255,255,0.8)";

document.getElementById("shuiyinBtn").onclick = function(){

var addtext = document.getElementById("shuiyinText").value;

ctx.fillText(addtext,10,50); //选择位置

}

}

}

shuiyin("shuiyinTest","../img/member_270x210.jpg")

下面就是见证奇迹的时刻了

而且我们还可以保存到本地哦！