フロントエンド側で画像圧縮する

● image-resize

https://github.com/kode-team/image-resize

npm i image-resize
import ImageResize from "image-resize";

const getCompressedImageFile = async (file: File) => {
  const imageResize = new ImageResize();
  let res = await imageResize
    .updateOptions({ height: 1000, quality: 0.75 })
    .get(file);
  res = await imageResize.resize(res);

  const blob = (await imageResize.output(res, {
    outputType: "blob",
  })) as Blob;

  return new File([blob], file.name, { type: file.type });
};

使い方

const newFile = getCompressedImageFile(file);

● browser-image-compression

https://github.com/Donaldcwl/browser-image-compression

npm install browser-image-compression
import imageCompression from "browser-image-compression";

const getCompressedImageFile = async (file: File) => {
  const options = {
    maxWidthOrHeight: 1000,
  };
  return await imageCompression(file, options);
};

使い方

const newFile = getCompressedImageFile(file);
No.2278
01/31 15:49

edit