使用Canvas压缩图片

cute_ming

已于 2024-12-24 11:15:09 修改

阅读量106

点赞数 2

文章标签： javascript 前端开发语言

于 2024-12-24 11:14:37 首次发布

本文链接：https://blog.csdn.net/cute_ming/article/details/144688754

版权

开箱即用，记得异步调用，方法如下：

export const compressImage = async (image: any, size: number) => {
  // 使用canvas压缩图片
  const canvas = document.createElement("canvas");
  const ctx = canvas.getContext("2d");
  const img = new Image();
  img.src = URL.createObjectURL(image);
  return new Promise((resolve, reject) => {
    img.onload = async () => {
      canvas.width = img.width;
      canvas.height = img.height;
      ctx.drawImage(img, 0, 0);
      canvas.toBlob(
        (blob) => {
          URL.revokeObjectURL(img.src);
          const compressedFile = new File([blob], image.name, {
            type: image.type,
            lastModified: Date.now(),
          });
          console.log("compressedFile", compressedFile);
          // 返回压缩后的文件
          resolve(compressedFile);
        },
        image.type,
        size,
      ); // size为压缩质量
    };
    img.onerror = () => {
      reject(new Error("图像加载失败"));
    };
  });
};

使用Promise包装，保证了数据正确返回