Flash を使用せずに JavaScript を使用してクライアント側で画像のサイズを変更するにはどうすればよいですか?

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

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

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

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

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

実装

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

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

<code class="HTML"><input type="file" id="select">
<img  id="preview" alt="Flash を使用せずに JavaScript を使用してクライアント側で画像のサイズを変更するにはどうすればよいですか?" ></code>

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

<code class="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.
    });
};</code>

機能とサポート

このアルゴリズムは、次のような幅広い機能とサポートを誇ります。

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

以上がFlash を使用せずに JavaScript を使用してクライアント側で画像のサイズを変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。