クライアント側でイメージを圧縮する方法

4976 ワード
image javascript nextjs typescript テキストリンク
Web上の画像を最適化するのは一般的なことです.For hellocurator , 我々はアップロードする前に画像を最適化したい、クライアント側でサーバーなしでそれを行うことができます.
The Canvas element JavaScriptを使用してイメージを操作します.
我々は多くのcode examples キャンバスAPIでイメージを圧縮する方法について.
私は使用するcompressorjs , 小さな図書館3.8 kB minzipped ).
コンプレッサー.jsはブラウザのネイティブを使いますHTMLCanvasElement.toBlob() 圧縮作業を行うAPI.
があるlive Demo それを再生する.

暗号


場合によっては、依存性をプロジェクトにラップしたいです.
コードは次のようになります.
import Compressor from "compressorjs";

export const compress = async (
  file: File,
  quality: number,
  maxHeight: number,
  maxWidth: number,
  convertSize?: number
): Promise<File | Blob> => {
  return await new Promise((resolve, reject) => {
    new Compressor(file, {
      quality,
      maxHeight,
      maxWidth,
      convertSize,
      success: resolve,
      error: reject,
    });
  });
};
このオプションは、GitHub repo .
そして使う
const upload async = (data) => {
  const file = data.image[0];
  const compressedFile = await compress(file, 0.6, 2000, 2000, 1000);
  const imageUploaded = await upload(compressedFile);
  ...
}
GitHub Gist
Post on my website
ghページをnetlifyにリダイレクトする
BOJ 2798ブラックジャック