vue中使用带隐藏文本信息的图片、图片水印
程序员文章站
2022-03-26 20:17:36
一.带隐藏文本信息的图片 通过RGB 分量值的小量变动，不影响对图片的识别。因此，我们可以在图片加入文字信息。 最终达到如下效果: 首先，在该组件中加入img用于显示图片 1 2 ![]()
一.带隐藏文本信息的图片
通过rgb 分量值的小量变动，不影响对图片的识别。因此，我们可以在图片加入文字信息。
最终达到如下效果:
首先，在该组件中加入img用于显示图片
1 <canvas ref="canvas" v-show="0"></canvas> 2 <img :src="imageurl" v-if="imageurl"/>
调用方法
1 encryptionimg({
2 width = '',
3 height = '',
4 content = '',
5 }){
6 let img = this.img
7 const imgratio = img.naturalwidth / img.naturalheight;
8 const ctxwidth = width || img.naturalwidth;
9 const ctxheight = height || ctxwidth / imgratio;
10 this.canvas.width = ctxwidth;
11 this.canvas.height = ctxheight;
12 const ctx = this.ctx;
13 ctx.font = '16px microsoft yahei';
14 ctx.textalign = 'left';
15 ctx.textbaseline = 'top';
16 ctx.filltext(content, 12, ctxheight/2, ctxwidth)
17 this.textimg = this.canvas.todataurl();
18 const textdata = ctx.getimagedata(0, 0, ctxwidth, ctxheight);
19 this.implicit = this.mergedata(textdata.data, 'r',ctxwidth,ctxheight)
20 this.imageurl = this.implicit
21 return this.implicit
22 }
把文字和图片整合成一张图
1 mergedata(newdata, color, width, height) {
2 let img = this.img
3 this.ctx.drawimage(img, 0, 0, width, height);
4 this.originaldata = this.ctx.getimagedata(0, 0, width, height);
5 var odata = this.originaldata.data;
6 var bit, offset;
7 switch (color) {
8 case 'r':
9 bit = 0;
10 offset = 3;
11 break;
12 case 'g':
13 bit = 1;
14 offset = 2;
15 break;
16 case 'b':
17 bit = 2;
18 offset = 1;
19 break;
20 }
21 for (var i = 0; i < odata.length; i++) {
22 if (i % 4 == bit) {
23 if (newdata[i + offset] === 0 && (odata[i] % 2 === 1)) {
24 if (odata[i] === 255) {
25 odata[i]--
26 } else {
27 odata[i]++
28 }
29 } else if (newdata[i + offset] !== 0 && (odata[i] % 2 === 0)) {
30 if (odata[i] === 255) {
31 odata[i]--
32 } else {
33 odata[i]++
34 }
35 }
36 }
37 }
38 this.ctx.putimagedata(this.originaldata, 0, 0);
39 return this.canvas.todataurl();
40 },
调用下面方法，解开图片信息
decryptimg(){
var data = this.originaldata.data;
for(var i = 0; i < data.length; i++){
if(i % 4 == 0){
if(data[i] % 2 == 0){
data[i] = 0;
} else {
data[i] = 255;
}
} else if(i % 4 == 3){
continue;
} else {
data[i] = 0;
}
}
this.ctx.putimagedata(this.originaldata, 0, 0);
this.imageurl = this.canvas.todataurl();
return this.imageurl
},
二.图片水印
1 watermark({
2 content = '',
3 container = '',
4 width = '',
5 height = '',
6 position = 'bottom-right',
7 font = '16px 微软雅黑',
8 fillstyle = 'rgba(255, 255, 255, 1)',
9 zindex = 11000,
10 } = {}) {
11 let img = this.img
12 const imgratio = img.naturalwidth / img.naturalheight;
13 const ctxwidth = width || img.naturalwidth;
14 const ctxheight = height || ctxwidth / imgratio;
15 this.canvas.width = ctxwidth;
16 this.canvas.height = ctxheight;
17 const ctx = this.ctx;
18 ctx.drawimage(img, 0, 0, ctxwidth, ctxheight);
19 ctx.shadowcolor = 'rgba(0, 0, 0, 0.2)';
20 ctx.shadowoffsetx = 2;
21 ctx.shadowoffsety = 2;
22 ctx.shadowblur = 2;
23 ctx.font = font;
24 ctx.fillstyle = fillstyle;
25 if(position == 'center') {
26 ctx.textalign = 'center';
27 ctx.textbaseline = 'middle';
28 ctx.filltext(content, ctxwidth / 2, ctxheight / 2, ctxwidth)
29 }else if(position == 'bottom-right') {
30 ctx.textalign = 'right';
31 ctx.textbaseline = 'alphabetic';
32 ctx.filltext(content, ctxwidth-12, ctxheight-12, ctxwidth)
33 }
34 const base64url = this.canvas.todataurl();
35 if(container) {
36 const div = document.createelement('div');
37 div.setattribute('style', ` width: ${ctxwidth}px; height: ${ctxheight}px; z-index: ${zindex};
38 pointer-events: none; background-repeat: repeat; background-image: url('${base64url}')`);
39 container.insertbefore(div, null);
40 }
41 this.imageurl = base64url
42 return base64url
43 },
参考