九色国产,午夜在线视频,新黄色网址,九九色综合,天天做夜夜做久久做狠狠,天天躁夜夜躁狠狠躁2021a,久久不卡一区二区三区

打開APP
userphoto
未登錄

開通VIP,暢享免費電子書等14項超值服

開通VIP
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 = 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 = 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();
      },

二.圖片水印

 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/

本站僅提供存儲服務,所有內容均由用戶發(fā)布,如發(fā)現(xiàn)有害或侵權內容,請點擊舉報。
打開APP,閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
使用html2Canvas打印高清PDF的原理解析
前端 H5 Video 常見場景淺析
html5 圖片旋轉
怎樣可以用HTML5 canvas旋轉圖片
使用canvas完成幀動畫(方向鍵控制行走的小人)
探索前端黑科技——通過 png 圖的 rgba 值緩存數(shù)據(jù)
更多類似文章 >>
生活服務
熱點新聞
分享 收藏 導長圖 關注 下載文章
綁定賬號成功
后續(xù)可登錄賬號暢享VIP特權!
如果VIP功能使用有故障,
可點擊這里聯(lián)系客服!

聯(lián)系客服