残缺代码：https://github.com/MXHOO/canvas

压缩图片

  1. 获取文件
  2. 应用cxt.drawImage 在canvas上画
  3. 利用canvas.toDataURL进行压缩
  4. 具体实现
function compress(file) {  return new Promise((reslove, reject) => {    let afterResult = ''    const img = new Image()    getBase64(file).then(data => {      img.src = data    }).catch(error => console.log(error))    img.onload = function() {      const canvas = document.createElement('canvas')      const context = canvas.getContext('2d')      canvas.width = this.width      canvas.height = this.height      /*    drawImage(img, sx, sy, swidth, sheight, x, y, width, height):在画布上绘制图像或视频, img为必填参数, 其余都为非必填    参数：img: 要绘制的图片或视频          sx: 开始裁剪的x坐标          sy: 开始裁剪的y坐标          swidth: 被裁剪图像的宽度          sheight: 被裁减图像的高度          x: 在画布上搁置的x坐标          y: 在画布上搁置的y坐标          width：要应用的图像的宽度（扩大/放大）          height：要应用的图像的宽度 （扩大/放大）    */     context.drawImage(before, 0, 0)      /* toDataURL(type, quailty): 返回一个蕴含图片展现的url         参数: type: 图片格式，默认为image/png               quailty: 当type为图片时，能够从 0 到 1 的区间内抉择图片的品质     */      afterResult = canvas.toDataURL(file.type, 0.5)      reslove(afterResult)    }    img.onerror = function(err) {      reject(err)    }  }) }

增加水印