vue/react通用上传前图片压缩

最新推荐文章于 2024-06-26 09:46:57 发布

A Wonder

最新推荐文章于 2024-06-26 09:46:57 发布

阅读量306

点赞数

文章标签： react.js vue.js javascript

本文链接：https://blog.csdn.net/weixin_46410505/article/details/129753523

版权

该文章介绍了一种在Vue或React项目中处理图片上传前的压缩方法，当无法使用第三方组件时，利用canvas和ImageAPI来压缩图片，根据图片大小设置不同的压缩比例，以适应后端对文件大小的限制。代码示例展示了如何读取文件、创建canvas、绘制图像并转换为压缩后的base64格式。

摘要由CSDN通过智能技术生成

vue/react通用上传前图片压缩

当做一些自研项目或者用不了antd等上传组件或者第三方包的时候,又有上传图片等需求,同时现阶段图片文件较大,后端限制大小的时候,如何处理?–利用canvas和Image处理

export const compressImg = (file) => {
  let disposeFile = file;
  if (Object.prototype.toString.call(file) === '[object Blob]') {
    disposeFile = new File([file], file.name, { type: file.type });
  }
  const read = new FileReader();
  const _that = this;
  const fileSize = parseFloat(parseInt(disposeFile.size, 10) / 1024 / 1024).toFixed(2);
  // 小于1m不压缩
  if (fileSize < 1) return file;
  read.readAsDataURL(disposeFile);
  return new Promise((resolve, reject) => {
    try {
      read.onload = (e) => {
        const img = new Image();
        img.src = e.target.result;
        // eslint-disable-next-line func-names
        img.onload = function () {
          const w = Math.floor(this.width / 2);
          const h = Math.floor(this.height / 2);
          const canvas = document.createElement('canvas');
          const ctx = canvas.getContext('2d');
          let base64;
          canvas.setAttribute('width', w);
          canvas.setAttribute('height', h);
          ctx.drawImage(this, 0, 0, w, h);
          console.log(w, h);
          if (fileSize < 1) {
            // 如果图片小于一兆 那么不执行压缩操作
            base64 = canvas.toDataURL(disposeFile.type, 1);
          } else if (fileSize > 1 && fileSize < 2) {
            // 如果图片大于1M并且小于2M 那么压缩0.5
            base64 = canvas.toDataURL(disposeFile.type, 0.5);
          } else {
            // 如果图片超过2m 那么压缩0.2
            base64 = canvas.toDataURL(disposeFile.type, 0.2);
          }
          resolve(dataURLtoFile(base64, disposeFile.name));
        };
      };
    } catch (error) {
      reject(disposeFile);
    }
  });
};

使用时候

 // 压缩-记得调用函数前async
    const compassedFile = await compressImg(selFiles[0].file);

其余部分可用input和button等模拟上传即可