JavaScript を使用したクライアント側の画像サイズ変更: オープンソース ソリューション

今日の Web 開発環境では、多くの場合、事前にクライアント側で画像のサイズを変更することが望ましいです。それらをサーバーにアップロードします。このアプローチにより、画像の品質を最適化し、サーバーの負荷を軽減し、ページの読み込み時間を短縮することでユーザー エクスペリエンスを向上させることができます。

Flash は画像のサイズ変更に一般的なオプションですが、多くの開発者はその使用を避けたいと考えています。幸いなことに、JavaScript を利用して画像のサイズを効果的に変更するソリューションがあります。

オープン ソースの画像サイズ変更アルゴリズム

GitHub で利用できるオープン ソース アルゴリズム (https://gist) .github.com/dcollien/312bce1270a5f511bf4a) は、クライアント側で画像のサイズを変更するための信頼できる方法を提供します。スクリプト タグに含めることができる ES6 バージョンと .js バージョンが提供されています。

実装

サイズ変更アルゴリズムを実装するには、次の手順に従います。

1. 以下に示すように HTML コードを追加します:

2. 以下の JavaScript コードを追加します:

document.getElementById('select').onchange = function(evt) {
    ImageTools.resize(this.files[0], {
        width: 320, // maximum width
        height: 240 // maximum height
    }, function(blob, didItResize) {
        // didItResize will be true if it managed to resize it, otherwise false (and will return the original file as 'blob')
        document.getElementById('preview').src = window.URL.createObjectURL(blob);
        // you can also now upload this blob using an XHR.
    });
};

機能とサポート

このアルゴリズムには、次のようなさまざまな機能とサポートが備わっています。

• 指定された最大幅に基づくサイズ変更と高さ
• ブラウザ間の互換性のために検出とポリフィルをサポート
• 効率化のためアニメーション GIF を除外