给自己的图片上个水印吧
- 效果如下(每当上传一张图内心都是不忍的,何况是gif):
思路:canvas绘制img+文字=>图文canvas=>canvas转化为img(toDataURL方法)
js代码如下:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59window.onload = function () {
changeWatermark();
};
function changeWatermark() {
var ctn = document.getElementById("ctn").value;
var canvas = document.getElementById("myCanvas");
var a = new watermark(ctn,canvas);
a.addWatermark(function () {
a.convertCanvasToImage()
});
}
/*水印方法*/
function watermark(ctn,canvas) {
this.ctn = ctn || "";
this.canvas = canvas || null;
}
/*添加水印操作*/
watermark.prototype.addWatermark = function (callback) {
var img = new Image();
img.src = '1.png';
var that = this;
img.onload = function () {
var hx = that.canvas.height-20;
var wx = that.canvas.width-20;
var ctx = that.canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
ctx.font = "40px microsoft yahei";
ctx.textAlign="right";
var gradient=ctx.createLinearGradient(0,0,that.canvas.width,0);
gradient.addColorStop("0","blue");
gradient.addColorStop("0.5","yellow");
gradient.addColorStop("1.0","red");
ctx.fillStyle=gradient;
ctx.fillText(that.ctn,wx,hx,wx);
if(typeof callback === "function"){
callback();
}
}
return this;
}
/*canvas水印转化为图片*/
watermark.prototype.convertCanvasToImage = function() {
var container = document.getElementById('picContainer');
var img = document.createElement('img');
img.src = this.canvas.toDataURL("image/png");
this.canvas.style.display = "none";
var deleteImg = document.querySelectorAll("#picContainer img");
if(!!deleteImg){
deleteImg.forEach(function (t) {
container.removeChild(t)
})
}
container.appendChild(img);
return this;
}
完整代码请移步github{:target=”_blank”}