这篇文章主要讲解了vue中如何使用带隐藏文本信息的图片、图片水印,内容清晰明了,对此有兴趣的小伙伴可以学习一下,相信大家阅读完之后会有帮助。
一.带隐藏文本信息的图片
通过RGB 分量值的小量变动,不影响对图片的识别。因此,我们可以在图片加入文字信息。
最终达到如下效果:
首先,在该组件中加入img用于显示图片
<canvas ref="canvas" v-show="0"></canvas> <img :src="imageUrl" v-if="imageUrl"/>
调用方法
encryptionImg({ width = '', height = '', content = '', }){ let img = this.img const imgRatio = img.naturalWidth / img.naturalHeight; const ctxWidth = width || img.naturalWidth; const ctxHeight = height || ctxWidth / imgRatio; this.canvas.width = ctxWidth; this.canvas.height = ctxHeight; const ctx = this.ctx; ctx.font = '16px Microsoft Yahei'; ctx.textAlign = 'left'; ctx.textBaseline = 'top'; ctx.fillText(content, 12, ctxHeight/2, ctxWidth);17 const textData = ctx.getImageData(0, 0, ctxWidth, ctxHeight); this.imageUrl = this.mergeData(textData.data, 'R',ctxWidth,ctxHeight);19 }
把文字和图片整合成一张图
mergeData(newData, color, width, height) { let img = this.img this.ctx.drawImage(img, 0, 0, width, height); this.originalData = this.ctx.getImageData(0, 0, width, height); var oData = this.originalData.data; var bit, offset; switch (color) { case 'R': bit = 0; offset = 3; break; case 'G': bit = 1; offset = 2; break; case 'B': bit = 2; offset = 1; break; } for (var i = 0; i < oData.length; i++) { if (i % 4 == bit) { if (newData[i + offset] === 0 && (oData[i] % 2 === 1)) { if (oData[i] === 255) { oData[i]-- } else { oData[i]++ } } else if (newData[i + offset] !== 0 && (oData[i] % 2 === 0)) { if (oData[i] === 255) { oData[i]-- } else { oData[i]++ } } } } this.ctx.putImageData(this.originalData, 0, 0); return this.canvas.toDataURL(); },
调用下面方法,解开图片信息
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(); },
二.图片水印
watermark({ content = '', container = '', width = '', height = '', position = 'bottom-right', font = '16px 微软雅黑', fillStyle = 'rgba(255, 255, 255, 1)', zIndex = 11000, } = {}) { let img = this.img const imgRatio = img.naturalWidth / img.naturalHeight; const ctxWidth = width || img.naturalWidth; const ctxHeight = height || ctxWidth / imgRatio; this.canvas.width = ctxWidth; this.canvas.height = ctxHeight; const ctx = this.ctx; ctx.drawImage(img, 0, 0, ctxWidth, ctxHeight); ctx.shadowColor = 'rgba(0, 0, 0, 0.2)'; ctx.shadowOffsetX = 2; ctx.shadowOffsetY = 2; ctx.shadowBlur = 2; ctx.font = font; ctx.fillStyle = fillStyle; if(position == 'center') { ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(content, ctxWidth / 2, ctxHeight / 2, ctxWidth) }else if(position == 'bottom-right') { ctx.textAlign = 'right'; ctx.textBaseline = 'alphabetic'; ctx.fillText(content, ctxWidth-12, ctxHeight-12, ctxWidth) } const base64Url = this.canvas.toDataURL(); if(container) { const div = document.createElement('div'); div.setAttribute('style', ` width: ${ctxWidth}px; height: ${ctxHeight}px; z-index: ${zIndex}; pointer-events: none; background-repeat: repeat; background-image: url('${base64Url}')`); container.insertBefore(div, null); } this.imageUrl = base64Url }
看完上述内容,是不是对vue中如何使用带隐藏文本信息的图片、图片水印有进一步的了解,如果还想学习更多内容,欢迎关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。