vue中使用帶隱藏文本資訊的圖片、圖片水印

一.帶隱藏文本資訊的圖片

通過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         const textData = https://www.cnblogs.com/gzlt/p/ctx.getImageData(0, 0, ctxWidth, ctxHeight);
18         this.imageUrl = this.mergeData(textData.data, 'R',ctxWidth,ctxHeight);
19       }

把文字和圖片整合成一張圖

 1 mergeData(newData, color, width, height) {
 2         let img = this.img
 3         this.ctx.drawImage(img, 0, 0, width, height);
 4         this.originalData = https://www.cnblogs.com/gzlt/p/this.ctx.getImageData(0, 0, width, height);
 5         var oData = https://www.cnblogs.com/gzlt/p/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 = https://www.cnblogs.com/gzlt/p/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();
      },

二.圖片水印

 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       }

參考

http://www.alloyteam.com/2016/03/image-steganography/

標籤：JavaScript

上一篇：[書籍精讀]《React Native精解與實戰》精讀筆記分享

下一篇：7.JavaScript陣列亂序排序