一.帶隱藏文本信息的圖片
通過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 }
參考
聯(lián)系客服