私のアプリケーションでは、HTML5 のファイル API を使用して、ドラッグ アンド ドロップ機能を備えています。また、ドロップされるファイルが 72 ピクセル/インチの解像度比に従うようにする必要もありました。
HTML5 または Javascript を使用して画像の解像度を確認するにはどうすればよいですか?
私のアプリケーションでは、HTML5 のファイル API を使用して、ドラッグ アンド ドロップ機能を備えています。また、ドロップされるファイルが 72 ピクセル/インチの解像度比に従うようにする必要もありました。
HTML5 または Javascript を使用して画像の解像度を確認するにはどうすればよいですか?
DPI はハードウェアの測定値であり、より具体的には印刷で使用され、画面に表示される画像データには適用されません。ピクセルはピクセルであり、そのサイズは、画像ファイルの設定ではなく、表示している画面の解像度によって異なります。
画像が 72 DPI で幅 72 ピクセルの場合、幅 72 ピクセルとして表示されます。画像が 144 DPI で幅が 72 px の場合、同じサイズで画面に表示されます。ただし、印刷では、144 DPI 画像は 72 DPI 画像の半分の幅になります。
これは (少し古い) JavaScript EXIF Readerです。
SO でこの回答を読むこともお勧めします。
blueimp Javascript-Load-Image ライブラリを使用できます。exif データ解析メソッドを使用して、画像の dpi やその他の情報を画像から解析できます。必要に応じて、ファイル タグまたは画像の URL から画像をローカルに読み込むことができます。
ほとんどの jpeg 画像と raw 画像形式は、dpi 情報を exif データに格納します。png などの他の形式には、exif データの準備がないため、そのような画像の dpi は、実際に photoshop などの画像編集ツールに読み込まないと抽出が困難です。