阿坝州网站建设公司

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

这篇文章主要讲解了vue中如何使用带隐藏文本信息的图片、图片水印，内容清晰明了，对此有兴趣的小伙伴可以学习一下，相信大家阅读完之后会有帮助。

创新互联公司专注为客户提供全方位的互联网综合服务，包含不限于网站建设、做网站、邵武网络推广、重庆小程序开发、邵武网络营销、邵武企业策划、邵武品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；创新互联公司为所有大学生创业者提供邵武建站搭建服务，24小时服务热线：18980820575，官方网址：www.cdcxhl.com

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

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

最终达到如下效果:

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

首先，在该组件中加入img用于显示图片

调用方法

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中如何使用带隐藏文本信息的图片、图片水印
文章地址：http://azwzsj.com/article/gogsgj.html

其他资讯