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重要知识更新
Jul 08 Javascript
基于jQuery实现点击同时更改两个iframe的网址
Jul 01 Javascript
jquery修改属性值实例代码(设置属性值)
Jan 06 Javascript
js在指定位置增加节点函数insertBefore()用法实例
Jan 12 Javascript
js获得当前系统日期时间的方法
May 06 Javascript
JavaScript实现自动变换表格边框颜色
May 08 Javascript
JQuery鼠标移到小图显示大图效果的方法
Jun 10 Javascript
详解JavaScript操作HTML DOM的基本方式
Oct 21 Javascript
浅析BootStrap Treeview的简单使用
Oct 12 Javascript
vue的props实现子组件随父组件一起变化
Oct 27 Javascript
Node.js中用D3.js的方法示例
Jan 16 Javascript
一个Js文件函数中调用另一个Js文件函数的方法演示
Aug 14 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包含文件函数include、include_once、require、require_once区别总结
2014/04/05 PHP
Discuz批量替换帖子内容的方法(使用SQL更新数据库)
2014/06/23 PHP
PHP封装的MSSql操作类完整实例
2016/05/26 PHP
js判断浏览器的比较全的代码
2007/02/13 Javascript
纯JS实现根据CSS的class选择DOM
2014/03/22 Javascript
JS图片定时翻滚效果实现方法
2016/06/21 Javascript
浅谈javascript中的Function和Arguments
2016/08/30 Javascript
jquery平滑滚动到顶部插件使用详解
2017/05/08 jQuery
JavaScript数据结构之双向链表定义与使用方法示例
2017/10/27 Javascript
vue引入ueditor及node后台配置详解
2018/01/03 Javascript
vue中v-for加载本地静态图片方法
2018/03/03 Javascript
微信小程序实现单选选项卡切换效果
2020/06/19 Javascript
生产制造追溯系统之再说条码打印
2019/06/03 Javascript
JS如何实现网站中PC端和手机端自动识别并跳转对应的代码
2020/01/08 Javascript
nodejs实现百度舆情接口应用示例
2020/02/07 NodeJs
网站渗透常用Python小脚本查询同ip网站
2017/05/08 Python
详解python里的命名规范
2018/07/16 Python
解决python打不开文件(文件不存在)的问题
2019/02/18 Python
Python3中列表list合并的四种方法
2019/04/19 Python
Pytorch 实现数据集自定义读取
2020/01/18 Python
python scatter函数用法实例详解
2020/02/11 Python
Python面向对象程序设计之类和对象、实例变量、类变量用法分析
2020/03/23 Python
python解释器安装教程的方法步骤
2020/07/02 Python
总结Pyinstaller的坑及终极解决方法(小结)
2020/09/21 Python
毕业生幼师求职自荐信
2013/10/01 职场文书
会计自我鉴定范文
2013/10/06 职场文书
卫生院艾滋病宣传活动小结
2014/07/09 职场文书
关于九一八事变的演讲稿2014
2014/09/17 职场文书
个人租房协议书范本
2014/09/30 职场文书
房屋租赁委托书范本
2014/10/04 职场文书
2014年志愿者工作总结
2014/11/20 职场文书
中学生勤俭节约倡议书
2015/04/29 职场文书
结婚主持人致辞
2015/07/28 职场文书
nginx处理http请求实现过程解析
2021/03/31 Servers
Python 中数组和数字相乘时的注意事项说明
2021/05/10 Python
Apache Kafka 分区重分配的实现原理解析
2022/07/15 Servers