市场上各种各样的图片处理器有很多,那么作为程序员的我们是不是应该自己做一个呢?那就从加水印开始吧
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")
下面就是见证奇迹的时刻了
而且我们还可以保存到本地哦!