富文本编辑器和图片压缩问题

粘贴图片

//粘贴图片
 let quill = this.$refs.myVueEditor.quill
    this.$forceUpdate()
    quill.root.addEventListener('paste', evt => {
      if (evt.clipboardData && evt.clipboardData.files && evt.clipboardData.files.length) {
        evt.preventDefault();
        [].forEach.call(evt.clipboardData.files, file => {
          if (!file.type.match(/^image\/(gif|jpe?g|a?png|bmp)/i)) {
            return
          }
          var range = quill.selection.savedRange.index+1 || 0
          this.$emit("putImage", file, quill, range);   //拿到file之后对文件进上传服务器
        })
      }
    }, false)

富文本粘贴word文字样式清除

//富文本粘贴word文字样式清除
this.editor.customConfig.pasteTextHandle = function (content) {
          // content 即粘贴过来的内容（html 或 纯文本），可进行自定义处理然后返回
          if (content == '' && !content) return ''
          var str = content
          str = str.replace(/<xml>[\s\S]*?<\/xml>/ig, '')
          str = str.replace(/<style>[\s\S]*?<\/style>/ig, '')
          str = str.replace(/<\/?[^>]*>/g, '')
          str = str.replace(/[ | ]*\n/g, '\n')
          str = str.replace(/ /ig, '')
          console.log('****', content)
          console.log('****', str)
          return str
        }

图片压缩

 PngGoImg( a ) {
  let e = a.name.substring( a.name.length - 4 )
  if (  e.toLowerCase() === '.png' ) {
    let b = a.name.substring( 0, a.name.length - 4 )
    let c = b + '.jpg'
    let d = new File( [ a ], c, {
      type: a.type,
      lastModified: Date.now(),
    } )
    return d
  } else {
    return a
  }

通过上面代码将文件转化成 .jpg
因为浏览器对png的图片压缩不友好，所以要转化成.jpg

import * as imageConversion from 'image-conversion';

引入 image-conversion 插件 对图片进行压缩处理，可以压缩比例也可以压缩到某个大小
具体操作，文档如下：
https://www.jianshu.com/p/53d4f2b34d54?utm_campaign=haruki&utm_content=note&utm_medium=reader_share&utm_source=weixin

let files = file.PngGoImg(imgfile)
      //判断其是否为图片，不是图片则不执行图片压缩
       return new Promise((resolve, reject) => {
          //异步回调的方式将图片的file流及图片的压缩比传进组件内部
        imageConversion.compressAccurately(files, file.ImgCompress(files.size)).then((res) => {
          res = new File([res], files.name, {
            type: res.type,
            lastModified: Date.now(),
          })
          //请进行您的操作
      //res就是转换并且压缩过的图片
        })
      })