JavaScript を使用して画像の寸法制限を強制する方法

JavaScript を使用して画像のアップロードにサイズ制限を適用する

ユーザーのアップロードを制御するために、画像の幅とサイズを確認する必要が生じる場合があります。サーバーに送信する前に高さを調整します。この JavaScript 機能は、指定された条件を満たす画像をフィルタリングするための洗練されたソリューションを提供します。

これを実現するには、File API を使用して、選択したファイルから画像オブジェクトを作成します。その仕組みは次のとおりです:

 function checkImageDimensions(target) {
   const file = target.files[0];

   // Create an image object to access its properties
   const img = new Image();
   const objectUrl = URL.createObjectURL(file);

   img.onload = function() {
     const width = this.width;
     const height = this.height;

     if (width > 240 || height > 240) {
       alert("Image dimensions exceed maximum (240x240)");
       return false;
     } else {
       // Image meets the dimension criteria
       // Continue with the upload process
       return true;
     }
   };

   img.src = objectUrl;
 }

 // Bind the event listener to the file input
 document.getElementById("photoInput").addEventListener("change", checkImageDimensions);

このスクリプトでは、

1. アップロードされたファイルから画像オブジェクトを作成します。
2. ロード イベント リスナーをアタッチします。画像オブジェクト。
3. 読み込みイベント ハンドラー内で、画像の寸法を取得し、指定された最大値と比較します。
4. 寸法を超えた場合は、画像が受け入れられるかどうかを示すアラートを表示します。

このアプローチにより、アップロードされた画像が希望のサイズに確実に準拠し、より制御されたユーザー エクスペリエンスが提供され、Web サイトでの潜在的な表示の問題が防止されます。

以上がJavaScript を使用して画像の寸法制限を強制する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。