html圖檔加水印元素,使用HTML5 Canvas給圖檔加水印效果

使用HTML5 Canvas給圖檔加水印效果2017-09-03 16:30

HTML5現在是越來越廣泛了，網上鋪天蓋地的都是html5遊戲、動畫。

還有現在現在朋友圈每天分享、轉發的連結，幾乎90%的頁面都是html5制作的。

是以HTML5是大勢所趨，現在不好好學習HTML5，以後勢必将會被淘汰。

今天小編分享的是使用HTML5 Canvas給圖檔加水印效果。 html代碼

使用HTML5 Canvas給圖檔加水印效果-三體教程

HTML5 Canvas神奇的圖檔水印

更改水印文字

var text="www.santii.com"

function change(){

text=document.getElementById("text").value;

init();

}

function init(){

watermark('canvas','1504426686722383.jpg',text);

}

function watermark(id,imgsrc,txt) {

canvas = document.getElementById(id);

if (canvas.getContext){

ctx = canvas.getContext('2d');

var img1 = new Image();

img1.src=imgsrc;

img1.onload = function(){

var imgWidth=img1.width;

var imgHeight=img1.height;

canvas.width= imgWidth;

canvas.height=imgHeight;

ctx.drawImage(img1,0,0);

ctx.fillStyle    = 'rgba(0, 0, 0, 0.25)';

ctx.font         = '30px sans-serif';

ctx.fillText(txt, canvas.width-(txt.length*15),canvas.height-30);

ctx.fillStyle    = 'rgba(255, 255, 255, 0.25)';

ctx.fillText(txt, canvas.width-(txt.length*15)-2,canvas.height-32)

}

}

}

有興趣的小夥伴可以看看三體教程裡面的HTML5教程，可以學習一下。