【二】react-draft-wysiwyg 图片本地预览 以及base64压缩

做富文本编辑的时候会遇到一个问题，图片选择后立马上传到服务器的话，用户如果最后没有发表文章，就会导致服务器有很多垃圾的图片，我这里的处理是：从本地选择之后不上传服务器，直接把图片转换成base64 本地预览。下面是代码：

这个是UI的代码

    const textEditor = (
      

    );

imageUploadCallBack = file => new Promise(
    (resolve, reject) => {
      var reader = new FileReader();
      reader.readAsDataURL(file);
      let img = new Image();
      // let url = ''
      reader.onload = function (e) {
        img.src = this.result
        resolve({
          data: {
            link: img.src
          }
        })
      }
    }
  );

但是转换到base64之后会很大 所以我把上面的代码加上了对bse64的压缩

这里参考了文章 https://blog.csdn.net/huangpb123/article/details/80560980

  imageUploadCallBack = file => new Promise(
    (resolve, reject) => {
      var reader = new FileReader();
      reader.readAsDataURL(file);
      let img = new Image();
      // let url = ''
      reader.onload = function (e) {
        img.src = this.result
      }
      img.onload = function () {
        // console.log(img.src.length)
        // 缩放图片需要的canvas（也可以在DOM中直接定义canvas标签，这样就能把压缩完的图片不转base64也能直接显示出来）
        var canvas = document.createElement('canvas');
        var context = canvas.getContext('2d');

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

        // 最大尺寸限制，可通过设置宽高来实现图片压缩程度
        var maxWidth = 400,
            maxHeight = 500;
        // 目标尺寸
        var targetWidth = originWidth,
            targetHeight = originHeight;
        // 图片尺寸超过300x300的限制
        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*/
        var newUrl = canvas.toDataURL('image/jpeg', 0.92);//base64 格式
        // console.log(newUrl.length)
        
        resolve({
          data: {
            link: newUrl
          }
        })

        //也可以把压缩后的图片转blob格式用于上传
        // canvas.toBlob((blob)=>{
        //     console.log(blob)
        //     //把blob作为参数传给后端
        // }, 'image/jpeg', 0.92)
      }
    }
  );