前端小程式——js+canvas 給圖片添加浮水印

標籤：rip   ddt   new   頁面   var   doc   div   java   style   

市場上各種各樣的圖片處理器有很多，那麼作為程式員的我們是不是應該自己做一個呢？那就從加浮水印開始吧

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")

下面就是見證奇蹟的時刻了

而且我們還可以儲存到本地哦！

前端小程式——js+canvas 給圖片添加浮水印