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 相关文章推荐
js AspxButton的客户端操作
Jun 26 Javascript
各浏览器对document.getElementById等方法的实现差异解析
Dec 05 Javascript
基于javascript实现全国省市二级联动下拉选择菜单
Jan 28 Javascript
laypage分页控件使用实例详解
May 19 Javascript
浅谈JQuery+ajax+jsonp 跨域访问
Jun 25 Javascript
浅谈jQuery为哪般去掉了浏览器检测
Aug 29 Javascript
jQuery html表格排序插件tablesorter使用方法详解
Feb 10 Javascript
vue 运用mock数据的示例代码
Nov 07 Javascript
理解Koa2中的async&amp;await的用法
Feb 05 Javascript
vue移动端监听滚动条高度的实现方法
Sep 03 Javascript
了解javascript中变量及函数的提升
May 27 Javascript
javascript实现前端成语点击验证
Jun 24 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
火车头采集器3.0采集图文教程
2007/03/17 PHP
php+mysql数据库实现无限分类的方法
2014/12/12 PHP
thinkPHP通用控制器实现方法示例
2017/11/23 PHP
解决php用mysql方式连接数据库出现Deprecated报错问题
2019/12/25 PHP
基于jquery实现的上传图片及图片大小验证、图片预览效果代码
2011/04/12 Javascript
js去字符串前后空格5种实现方法及比较
2013/04/03 Javascript
jQuery插件datalist实现很好看的input下拉列表
2015/07/14 Javascript
js显示当前日期时间和星期几
2015/10/22 Javascript
JavaScript实现简单的tab选项卡切换
2016/01/05 Javascript
简介BootStrap model弹出框的使用
2016/04/27 Javascript
浅谈js基本数据类型和typeof
2016/08/09 Javascript
Bootstrap轮播插件使用代码
2016/10/11 Javascript
解决vue2.x中数据渲染以及vuex缓存的问题
2017/07/13 Javascript
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
2017/07/22 jQuery
在create-react-app中使用css modules的示例代码
2018/07/31 Javascript
深入理解Vue router的部分高级用法
2018/08/15 Javascript
node实现生成带参数的小程序二维码并保存到本地功能示例
2018/12/05 Javascript
如何在Angular应用中创建包含组件方法示例
2019/03/23 Javascript
JQuery Ajax跨域调用和非跨域调用问题实例分析
2019/04/16 jQuery
微信小程序实现折线图的示例代码
2019/06/07 Javascript
python实现学生信息管理系统
2020/04/05 Python
python实现大转盘抽奖效果
2019/01/22 Python
Python学习笔记之Zip和Enumerate用法实例分析
2019/08/14 Python
Python类中的魔法方法之 __slots__原理解析
2019/08/26 Python
Pytorch Tensor的统计属性实例讲解
2019/12/30 Python
Python实现一个简单的毕业生信息管理系统的示例代码
2020/06/08 Python
Django中和时区相关的安全问题详解
2020/10/12 Python
Python 将代码转换为可执行文件脱离python环境运行(步骤详解)
2021/01/25 Python
巴西儿童时尚购物网站:Dinda
2019/08/14 全球购物
大学生党课思想汇报
2013/12/29 职场文书
教师现实表现材料
2014/02/14 职场文书
军校大学生个人的自我评价
2014/02/17 职场文书
《宿建德江》教学反思
2014/04/23 职场文书
安全伴我行演讲稿
2014/09/04 职场文书
学习党的群众路线对照检查材料
2014/09/29 职场文书
导游词之澳门玫瑰圣母堂
2019/12/03 职场文书