mavon-editor实现压缩图片并上传(前端)

mavon-editor的官方文档内就有关于上传图片的方法：

<template>
    <mavon-editor ref=md @imgAdd="$imgAdd" @imgDel="$imgDel"></mavon-editor>
</template>

exports default {
    methods: {
        // 绑定@imgAdd event
        $imgAdd(pos, $file){
            // 第一步.将图片上传到服务器.
           var formdata = new FormData();
           formdata.append('image', $file);
           axios({
               url: 'server url',
               method: 'post',
               data: formdata,
               headers: { 'Content-Type': 'multipart/form-data' },
           }).then((url) => {
               // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
               /**
               * $vm 指为mavonEditor实例，可以通过如下两种方式获取
               * 1. 通过引入对象获取: `import {mavonEditor} from ...` 等方式引入后，`$vm`为`mavonEditor`
               * 2. 通过$refs获取: html声明ref : `<mavon-editor ref=md ></mavon-editor>，`$vm`为 `this.$refs.md`
               */
               $vm.$img2Url(pos, url);
           })
        }
    }
}

mavon-editor官方文档链接：mavon-editor

但是直接上传图片的话，如果图片很大，就会给服务器造成很大的压力，也会拖慢页面加载速度。一般来说，网页图片大小不应该超过200kb（百度到的），所以上传之前有必要对图片进行压缩。

这里直接给出我对mavon-editor的上传图片方法的改造：

imgAdd(pos, $file) { //上传图片
      let $vm = this.$refs.md
      const formData = new FormData()

      // 压缩图片
      if($file.type.indexOf("image") === 0) {
        let reader = new FileReader(), img = new Image();
        reader.readAsDataURL($file)
        reader.onload = function(e) {
          img.src = e.target.result
        }
        img.onload = function () {
          // 缩放图片需要的canvas（也可以在DOM中直接定义canvas标签，这样就能把压缩完的图片不转base64也能直接显示出来）
          let canvas = document.createElement('canvas');
          let context = canvas.getContext('2d');

          // 图片原始尺寸
          let originWidth = this.width
          let originHeight = this.height

          // 最大尺寸限制，可通过设置宽高来实现图片压缩程度
          let maxWidth = 800, maxHeight = 800
          // 目标尺寸
          let targetWidth = originWidth, targetHeight = originHeight
          // 图片尺寸超过800x800的限制
          if (originWidth > maxWidth || originHeight > maxHeight) {
            if (originWidth / originHeight > maxWidth / maxHeight) {
              // 更宽，按照宽度限定尺寸
              targetWidth = maxWidth;
              targetHeight = Math.round(maxWidth * (originHeight / originWidth));
            } else {
              targetHeight = maxHeight;
              targetWidth = Math.round(maxHeight * (originWidth / originHeight));
            }
          }
          // canvas对图片进行缩放
          canvas.width = targetWidth
          canvas.height = targetHeight
          // 清除画布
          context.clearRect(0, 0, targetWidth, targetHeight)
          // 图片压缩
          context.drawImage(img, 0, 0, targetWidth, targetHeight)
          /*第一个参数是创建的img对象；第二三个参数是左上角坐标，后面两个是画布区域宽高*/

          //压缩后的图片转base64 url
          /*canvas.toDataURL(mimeType, qualityArgument),mimeType 默认值是'image/png';
           * qualityArgument表示导出的图片质量，只有导出为jpeg和webp格式的时候此参数才有效，默认值是0.92*/
          let newUrl = canvas.toDataURL('image/jpeg', 0.6);//base64 格式

          // base64 转 blob 再转 file
          let arr = newUrl.split(","),
            mime = arr[0].match(/:(.*?);/)[1], // 去掉url的头，并转化为byte
            bstr = atob(arr[1]), // 处理异常,将ascii码小于0的转换为大于0
            n = bstr.length,
            u8arr = new Uint8Array(n);
          while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
          }
          // 转blob
          let filename = Date.parse(new Date()) + ".jpeg"
          // 转file
          let file = new File([u8arr], filename, { type: mime })

          // 将图片上传到服务器
          formData.append('file', file)
          axios({
            url: 'http://localhost:9090/file/upload',
            method: 'post',
            data: formData,
            headers: {'Content-Type': 'multipart/form-data'},
          }).then((res) => {
            // 将返回的url替换到文本原位置![...](./0) -> ![...](url)
            $vm.$img2Url(pos, res.data)
          })
        }
      }
    },

这里我将图片大小压缩为不超过800*800，图片质量压缩为60%，所有图片转为jpeg格式。

压缩效果还是很明显的，8MB的图片能压缩到100KB大小，图片质量看起来也还行。