js前端压缩图片方法

png格式无法压缩

核心函数

//图片压缩
const compressUpload = (image, file) => {
  if (!(image instanceof Image)) {
    throw new Error('Invalid image object');
  }
  //压缩到100kb
  const size = 1024 * 100
  //压缩率
  const compressibility = size / file.size
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  const { width } = image;
  const { height } = image;
  canvas.width = width;
  canvas.height = height;
  ctx?.fillRect(0, 0, canvas.width, canvas.height);
  ctx?.drawImage(image, 0, 0, width, height);
  const compressData = canvas.toDataURL(file.type ?? 'image/jpeg', compressibility);
  const blobImg = dataURItoBlob(compressData);

  return blobImg;
};

//转换二进制
const dataURItoBlob = (data) => {
  const dataArray = data.split(',');
  const contentType = dataArray[0];
  const dataContent = dataArray[1];

  const byteString = contentType.indexOf('base64') >= 0 ? atob(dataContent) : decodeURI(dataContent);

  const [, mimeType] = contentType.split(':');
  const [type] = mimeType.split(';');

  const ia = new Uint8Array(byteString.length);
  byteString.split('').forEach((char, i) => {
    ia[i] = char.charCodeAt(0);
  });

  return new Blob([ia], { type });
};

用法

以antD的upload组件为例

const onBeforeUpload = (file) => {
  return new Promise((resolve, reject) => {
    const image = new Image()
    image.src = URL.createObjectURL(file)
    image.onload = () => {
      const blobImg = compressUpload(image, file)
      resolve(blobImg)
    }
    image.onerror = (error) => {
      reject(error)
    }
  })
}