JavaScriptを使用して画像のURLを確認する信頼できる方法

Question

私のウェブアプリケーションでは、ユーザーがURLの種類を束ねています。私のビューは、URLが画像を指しているかどうかに応じて、リンクアイコンまたは画像プレビューを表示しています。

実際に画像の場合にのみ画像プレビューを表示する最も信頼性の高い方法は何ですか？ <img>を作成し、読み込み時に寸法を確認するか、new Image()オブジェクトを使用するのか、それとも別のものを使用するのですか？

アドバイスありがとうございます。 :)

Answer 1

ソースポイントが有効な画像であるかどうかを確認する最も信頼性の高い互換性のある方法は、Imageオブジェクトを使用することです。それが引き金となり、画像onloadとしてそれを読み込むことができ、そうでない場合はonerrorがトリガされます：

var img = new Image; 
img.onload = function() { /* OK */ }; 
img.onerror = function() { /* cannot read this as an image */ }; 
img.onabort = function() { /* connection or source was reset */ }; 
img.src = "URLtoCheckHere"; 

を欠点は、ブラウザがそれを読み、解読できるかどうかを調べることができる前に画像全体がロードされることはもちろんです。

何らかの理由でImageを使用できない場合は、XHR経由でソースポイントを読み取ることができますが、それには独自の制限があります（cross-origin resource sharing）。イメージが同じ起源（プロトコル、ドメイン、ポートなど）でなく、外部サーバーがコス使用を許可しない場合、読み込みは単に失敗するだけです。

しかし、これらの制限が問題ではない場合（つまり、画像がページや親しみやすいサイトと同じサーバーからのものである場合）、画像の一部をArrayBufferとして読み取って、magic numbersにあなたがサポートしたい画像タイプ。バイトオーダーに注意してください。

範囲を指定するには、Range headerを使用します（ただし、サーバーがそれを尊重するかどうかはわかりません）。ファイルの一部を仮定し

がArrayBufferに読み込まれました：ファイルが有効なイメージファイルとして検出された場合でも、

var reader = new DataView(arrBuffer); 

if (reader.getUint32(0) === 0x89504E47 && 
    reader.getUint32(4) === 0x0D0A1A0A) { 
    // this seem to be a PNG file 
} 
else ... etc. 

しかし、ファイルが破損していないことの保証はありませんし、そうです。このメソッドを使用してファイルを検証する方法はありません（あなた自身でパーサーを書くことを選択しない限り）。

結論として、ほとんどのシナリオではImageが最善の選択肢です。メインブラウザで何年も何度も繰り返してきましたが、かなり堅牢で安定しています。