vue上传图片添加水印（图片、文字）

需求需要上传图片时添加水印，oss提供了一些加后缀的办法，但只是页面上展示加上了水印，预览大图和上传到服务器上还是没有，所以要用canvas实现，如图

<el-upload ref="uploadFile30"
               v-show="imageList.length < maxLength"
               action
               accept="image/png, image/jpeg, image/gif, image/jpg"
               :http-request="function(val){uploadImage(val, imageList)}"
               :file-list="imageList"
               :multiple="true"
               :show-file-list="false"
               :limit="maxLength"
               :disabled="imageList.length>=maxLength">
      <div class="upload-plus">
        <i class="el-icon-plus"></i>
      </div>
    </el-upload>

    uploadImage (params) {
      if (/^image/.test(params.file.type) && params.file && window.FileReader) {
        let self = this;
        // 创建一个reader
        let reader = new FileReader();
        // 将图片将转成 base64 格式
        reader.readAsDataURL(params.file);
        // 读取成功后的回调
        reader.onloadend = function () {
          let result = this.result;
          let img = new Image();
          img.src = result;
          img.onload = function () {
            let canvas = document.createElement('canvas')
            let context = canvas.getContext('2d')
            canvas.width = img.width
            canvas.height = img.height
            let water_data
            let myImage1 = new Image();
            myImage1.src = jilu; //这里是本地图片，如果是服务器地址需要跨域
            // myImage1.crossOrigin = 'Anonymous';// 跨域设置
            myImage1.onload = () => {
                context.drawImage(img, 0, 0)
                context.drawImage(myImage1, img.width-100,img.height-100); // 画图片水印
                let canvasWater = document.createElement('canvas')
                canvasWater.width = 40
                canvasWater.height = 40
                context.textAlign = 'left'
                context.textBaseline = 'middle'
                context.font = '36px Microsoft Yahei'
                context.fillStyle = '#fff'
                context.fillText('logo', 40, 40)
                context.fillStyle = context.createPattern(canvasWater, 'repeat')
                context.fillRect(0, 0, canvas.width, canvas.height)
                let fileData = canvas.toDataURL()
                water_data = new Image()
                water_data.src = fileData
                self.uploadApi(params, waterData);
            };
          }
        }
      } else {//不是图片格式的直接进行上传
        this.uploadApi(params, params.file);
      }
    },

参考http://t.csdnimg.cn/XDp6w