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

<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
   }