vue中使用带隐藏文本信息的图片、图片水印的方法


Posted in Javascript onApril 24, 2020

一.带隐藏文本信息的图片

通过RGB 分量值的小量变动,不影响对图片的识别。因此,我们可以在图片加入文字信息。

最终达到如下效果:

vue中使用带隐藏文本信息的图片、图片水印的方法

首先,在该组件中加入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
   }

参考

http://www.alloyteam.com/2016/03/image-steganography/

到此这篇关于vue中使用带隐藏文本信息的图片、图片水印的文章就介绍到这了,更多相关vue 隐藏文本信息图片水印内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript里的条件判断
Feb 27 Javascript
JQuery 中几个类选择器的简单使用介绍
Mar 14 Javascript
js 通用订单代码
Dec 23 Javascript
JQuery boxy插件在IE中边角图片不显示问题的解决
May 20 Javascript
在JavaScript中使用NaN值的方法
Jun 05 Javascript
浅谈DOCTYPE对$(window).height()取值的影响
Jul 21 Javascript
浅析JavaScript中break、continue和return的区别
Nov 30 Javascript
vue :src 文件路径错误问题的解决方法
May 15 Javascript
微信小程序实现留言板功能
Nov 02 Javascript
详解基于electron制作一个node压缩图片的桌面应用
Jan 29 Javascript
详解JavaScript作用域和作用域链
Mar 19 Javascript
Vue的自定义组件不能使用click方法的解决
Jul 28 Javascript
基于Vue实现微前端的示例代码
Apr 24 #Javascript
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
Apr 24 #Javascript
小程序开发之模态框组件封装
Apr 23 #Javascript
详解Vue3中对VDOM的改进
Apr 23 #Javascript
微信小程序实现滑动操作代码
Apr 23 #Javascript
微信小程序图片右边加两行文字的代码
Apr 23 #Javascript
Vue中通过vue-router实现命名视图的问题
Apr 23 #Javascript
You might like
PHP入门
2006/10/09 PHP
解析php利用正则表达式解决采集内容排版的问题
2013/06/20 PHP
HTML页面如何象ASP一样接受参数
2007/02/07 Javascript
通过JAVASCRIPT读取ASP设定的COOKIE
2007/02/15 Javascript
JQuery将文本转化成JSON对象需要注意的问题
2011/05/09 Javascript
关于extjs treepanel复选框选中父节点与子节点的问题
2013/04/02 Javascript
js实现目录定位正文示例
2013/11/14 Javascript
文本框只能选择数据到文本框禁止手动输入
2013/11/22 Javascript
jquery删除提示框弹出是否删除对话框
2014/01/07 Javascript
利用jquery制作滚动到指定位置触发动画
2016/03/26 Javascript
jQuery倒计时代码(超简单)
2017/02/27 Javascript
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
2017/06/11 jQuery
vue axios 在页面切换时中断请求方法 ajax
2018/03/05 Javascript
解决iview打包时UglifyJs报错的问题
2018/03/07 Javascript
vue cli3.0结合echarts3.0与地图的使用方法示例
2019/03/26 Javascript
深入学习JavaScript中的bom
2019/05/27 Javascript
浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用
2020/03/08 Javascript
python3+PyQt5使用数据库窗口视图
2018/04/24 Python
Python读取excel中的图片完美解决方法
2018/07/27 Python
python3.6.3安装图文教程 TensorFlow安装配置方法
2020/06/24 Python
Pycharm无法显示动态图片的解决方法
2018/10/28 Python
python 随机打乱 图片和对应的标签方法
2018/12/14 Python
Python 使用 Pillow 模块给图片添加文字水印的方法
2019/08/30 Python
tensorflow实现打印ckpt模型保存下的变量名称及变量值
2020/01/04 Python
pycharm通过ssh连接远程服务器教程
2020/02/12 Python
Python自动采集微信联系人的实现示例
2020/02/28 Python
销售职业生涯规划范文
2014/03/14 职场文书
幼儿园新年寄语
2014/04/03 职场文书
工业自动化专业自荐信范文
2014/04/10 职场文书
五月的鲜花活动方案
2014/08/21 职场文书
个人反四风对照检查材料思想汇报
2014/09/23 职场文书
商务司机岗位职责
2015/04/10 职场文书
停发工资证明范本
2015/06/12 职场文书
高二语文教学反思
2016/02/16 职场文书
利用Python网络爬虫爬取各大音乐评论的代码
2021/04/13 Python
python装饰器代码解析
2022/03/23 Python