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 相关文章推荐
jquery表单验证框架提供的身份证验证方法(示例代码)
Dec 27 Javascript
JS实现弹性漂浮效果的广告代码
Sep 02 Javascript
使用node+vue.js实现SPA应用
Jan 28 Javascript
使用Vue.js创建一个时间跟踪的单页应用
Nov 28 Javascript
详解AngularJS脏检查机制及$timeout的妙用
Jun 19 Javascript
详解angularjs实现echart图表效果最简洁教程
Nov 29 Javascript
基于IView中on-change属性的使用详解
Mar 15 Javascript
vue数据响应式原理知识点总结
Feb 16 Javascript
vscode调试node.js的实现方法
Mar 22 Javascript
vue-cli3单页构建大型项目方案
Apr 07 Javascript
vue-admin-template配置快捷导航的代码(标签导航栏)
Sep 04 Javascript
vuex中遇到的坑,vuex数据改变,组件中页面不渲染操作
Nov 16 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 trim 去除空字符的定义与语法介绍
2010/05/31 PHP
PHP zlib扩展实现页面GZIP压缩输出
2010/06/17 PHP
PHP文件打开、关闭、写入的判断与执行代码
2011/05/24 PHP
PHP连接SQLSERVER 注意事项(附dll文件下载)
2012/06/28 PHP
php生成百度sitemap站点地图类函数实例
2014/10/17 PHP
PHP环境搭建的详细步骤
2016/06/30 PHP
php PDO实现的事务回滚示例
2017/03/23 PHP
解决PHP使用CURL发送GET请求时传递参数的问题
2019/10/11 PHP
使用laravel指定日志文件记录任意日志
2019/10/17 PHP
鼠标右击事件代码(asp.net后台)
2011/01/27 Javascript
JS读取cookies信息(记录用户名)
2012/01/10 Javascript
jquery实现浮动的侧栏实例
2015/06/25 Javascript
原生JavaScript实现异步多文件上传
2015/12/02 Javascript
JS 日期与时间戮相互转化的简单实例
2016/06/22 Javascript
javascript判断元素存在和判断元素存在于实时的dom中的方法
2017/01/17 Javascript
基于Vue的文字跑马灯组件(npm 组件包)
2017/05/24 Javascript
详解Webstorm 下的Angular2.0开发之路(图文)
2018/12/06 Javascript
解决Vue 给mapState中定义的属性赋值报错的问题
2020/06/22 Javascript
[03:18]DOTA2亚洲邀请赛小组赛第一日 RECAP赛事回顾
2015/01/30 DOTA
[01:01:24]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第三局
2016/02/25 DOTA
采用Psyco实现python执行速度提高到与编译语言一样的水平
2014/10/11 Python
python XlsxWriter模块创建aexcel表格的实例讲解
2018/05/03 Python
python http基本验证方法
2018/12/26 Python
Python实现对特定列表进行从小到大排序操作示例
2019/02/11 Python
基于python实现从尾到头打印链表
2019/11/02 Python
python使用pygame实现笑脸乒乓球弹珠球游戏
2019/11/25 Python
python实现简单井字棋游戏
2020/03/04 Python
Django配置Bootstrap, js实现过程详解
2020/10/13 Python
韩国现代百货官网:Hmall
2018/03/21 全球购物
.NET初级开发工程师面试题
2014/04/18 面试题
应聘自荐信
2013/12/14 职场文书
行政内勤岗位职责
2014/04/07 职场文书
如何写新闻稿
2015/07/18 职场文书
公文写作:工伤事故分析报告怎么写?
2019/11/05 职场文书
python实现剪贴板的操作
2021/07/01 Python
Linux中各个目录的作用与内容
2022/06/28 Servers