vue中使用带隐藏文本信息的图片、图片水印的方法 程序员文章站 2022-04-06 13:27:23 一.带隐藏文本信息的图片通过rgb 分量值的小量变动,不影响对图片的识别。因此,我们可以在图片加入文字信息。最终达到如下效果:首先,在该组件中加入img用于显示图片 一.带隐藏文本信息的图片 通过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中使用带隐藏文本信息的图片、图片水印的文章就介绍到这了,更多相关vue 隐藏文本信息图片水印内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持! 上一篇: AndroidStudio替换项目图标ic_launcher操作 下一篇: Node.js API详解之 dns模块用法实例分析 推荐阅读 jQuery中fadeIn、fadeOut、fadeTo的使用方法(图片显示与隐藏) vue中使用带隐藏文本信息的图片、图片水印 jQuery中fadeIn、fadeOut、fadeTo的使用方法(图片显示与隐藏)_jquery jQuery中fadeIn、fadeOut、fadeTo的使用方法(图片显示与隐藏)_jquery jQuery中fadeIn、fadeOut、fadeTo的使用方法(图片显示与隐藏) vue中使用带隐藏文本信息的图片、图片水印的方法 vue中使用带隐藏文本信息的图片、图片水印