欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-07-09 19:47:36
一.带隐藏文本信息的图片 通过RGB 分量值的小量变动,不影响对图片的识别。因此,我们可以在图片加入文字信息。 最终达到如下效果: 首先,在该组件中加入img用于显示图片 1 2

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

通过rgb 分量值的小量变动,不影响对图片的识别。因此,我们可以在图片加入文字信息。

最终达到如下效果:

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

首先,在该组件中加入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       },

参考