榆次小程序开发_vue中使用带隐藏文本信息的图片

日期:2021-01-05 类型:行业动态 

关键词:秀米制作h5,h5如何制作,h5小游戏制作,h5游戏开发,免费的h5制作网站

vue中使用带隐藏文本信息的图片、图片水印的方法     ,人生如戏   这篇文章主要介绍了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中使用带隐藏文本信息的图片、图片水印的文章就介绍到这了,更多相关vue 隐藏文本信息图片水印内容请搜索凡科以前的文章或继续浏览下面的