vue中使用带隐藏文本信息的图片、图片水印
程序员文章站
2022-03-26 20:17:36
一.带隐藏文本信息的图片 通过RGB 分量值的小量变动,不影响对图片的识别。因此,我们可以在图片加入文字信息。 最终达到如下效果: 首先,在该组件中加入img用于显示图片 1 2
一.带隐藏文本信息的图片
通过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 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 },
参考