当前位置： 移动技术网 > IT编程>开发语言>JavaScript > vue中使用带隐藏文本信息的图片、图片水印

vue中使用带隐藏文本信息的图片、图片水印

2020年04月22日  | 移动技术网IT编程  | 我要评论

一.带隐藏文本信息的图片

通过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       },

参考

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网