とあるアプリの個人開発で、Input要素クリックでfirestorageに画像アップとサムネイルを表示する機能を実装してみたのですが、2MB以上くらいの画像だと何度やっても全然アップロードできない、、
みたいなことがあったので（無料枠で使いたかったし）、アップロード時にリサイズしようと思いやってみました。

その時のリサイズの機能を調べて実装したのでいちおう記録に残してておこうかなと

使っていたのはReact,Next,TypeScript,Firebaseです

実装したコード

resizeImage.ts

function resizeImage(file: File, maxWidth: number, maxHeight: number): Promise<string> {
    return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onload = function(event: ProgressEvent<FileReader>) {
            if (!event.target?.result) {
                reject(new Error("ファイルの読み込みに失敗しました。"));
                return;
            }

            const img = new Image();
            img.src = event.target.result as string;

            img.onload = function() {
                let width = img.width;
                let height = img.height;

                if (width > maxWidth) {
                    height = height * (maxWidth / width);
                    width = maxWidth;
                }

                if (height > maxHeight) {
                    width = width * (maxHeight / height);
                    height = maxHeight;
                }

                const canvas = document.createElement('canvas');
                canvas.width = width;
                canvas.height = height;

                const ctx = canvas.getContext("2d");
                if (!ctx) {
                    reject(new Error("キャンバスのコンテキストの取得に失敗しました。"));
                    return;
                }

                ctx.drawImage(img, 0, 0, width, height);
                resolve(canvas.toDataURL("image/jpeg"));
            }

            img.onerror = function() {
                reject(new Error("画像の読み込みに失敗しました。"));
            }
        }

        reader.onerror = function() {
            reject(new Error("ファイルの読み込みに失敗しました。"));
        }

        reader.readAsDataURL(file);
    });
}

export default resizeImage;

この関数は、与えられたFileオブジェクトをリサイズして、リサイズされた画像のData URLを返すPromiseを返します。このPromiseは、リサイズが成功した場合にはresolveされ、何らかのエラーが発生した場合にはrejectされます。

他の画像関連投稿: 選択画像の画像をプレビューとして表示