アップロード前の JavaScript を使用したクライアント側の画像のサイズ変更

サーバーにアップロードする前にクライアント側で画像のサイズを変更すると、いくつかの利点があります。これにより、サーバーの負荷が軽減され、ページのレンダリングが高速化され、より良いユーザー エクスペリエンスが提供されます。

クライアント側の JavaScript 画像のサイズ変更は可能ですか?

はい、可能です。 JavaScript を使用してクライアント側で画像のサイズを変更します。 Flash に頼らずにサイズ変更を可能にするオープンソース アルゴリズムが利用可能です。

クライアント側の画像サイズ変更のアルゴリズム

そのようなアルゴリズムの 1 つが GitHub で入手できます: https: //gist.github.com/dcollien/312bce1270a5f511bf4a。これには、任意の Web アプリケーションに埋め込むことができる ES6 とバニラ JavaScript の両方のバージョンが含まれています。

使用例

アルゴリズムを使用するには:

1. 提供された JavaScript コードを Web ページに埋め込みます。
2. ファイル選択の入力を定義し、サイズ変更された画像を表示するためのイメージ タグを指定します。
3. 入力の onchange イベント リスナーで、アルゴリズムによって提供されるサイズ変更関数を呼び出します。必要なサイズとコールバック関数を指定します。
4. コールバック関数は、サイズ変更された BLOB と、サイズ変更が成功したかどうかを示すフラグを受け取ります。
5. 返された BLOB を使用して、サイズ変更された画像をプレビューするための画像タグ。

機能

• ES6 とバニラ JavaScript の両方をサポート。
• ブラウザの機能を自動的に検出互換性を最適化するためにポリフィルを適用します。
• 整合性を維持するためにアニメーション GIF 画像を無視します。