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

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

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

最终达到如下效果:

首先，在该组件中加入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);
        const textData = ctx.getImageData(0, 0, ctxWidth, ctxHeight);
        this.imageUrl = this.mergeData(textData.data, 'R',ctxWidth,ctxHeight);
      }

把文字和图片整合成一张图

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', `  ${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/