JavaScript はサーバーにアップロードする前にクライアント側で画像のサイズ変更を実行できますか?

サーバーにアップロードする前に JavaScript を使用してクライアント側で画像のサイズを変更する

はじめに

画像を扱う場合、多くの場合、サーバーにアップロードする前に、特定の要件を満たすようにサイズを変更します。以前はこのタスクには Flash を使用するのが一般的でしたが、最新のブラウザでは高度な JavaScript ベースの画像サイズ変更機能がサポートされています。

JavaScript を使用したクライアント側の画像サイズ変更

堅牢なオープンソースの JavaScript アルゴリズムがすぐに利用できる場合、複雑な Flash 実装に頼る必要はありません。この強力なツールを活用する方法は次のとおりです:

サイズ変更アルゴリズム

画像のサイズを変更するための JavaScript コードにアクセスするには、この GitHub Gist を参照してください: https://gist.github .com/dcollien/312bce1270a5f511bf4a

使用法

アップロード前に画像のサイズを変更するには、次の手順を実行します。

1. 入力フィールドを作成します。ファイル選択 () と、サイズ変更された画像を表示するための画像要素 ()。
2. ファイル選択時、ファイル、必要なサイズ、コールバック関数を指定して ImageTools.resize() を呼び出します。
3. コールバックでは、サイズ変更された BLOB と、サイズ変更が成功したかどうかを示すフラグを受け取ります。
4. サイズ変更された画像で画像ソースを更新します (成功した場合)。
5. BLOB を利用して、XHR 経由でサイズ変更された画像をサーバーにアップロードします。

利点

このソリューションにはいくつかの利点があります。

• クライアント側で画像のサイズを変更し、サーバー側の処理の必要性を排除します。
• クロスプラットフォームの互換性、幅広いサポート最新のブラウザの範囲。
• さまざまな画像形式の包括的なサポート。
• アニメーション GIF のサポートを含む堅牢な機能。

以上がJavaScript はサーバーにアップロードする前にクライアント側で画像のサイズ変更を実行できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。