2015/09/30
JavaScriptで拡張子のない画像のファイルの種類を判別する方法(IE9以上)
サーバーで出力された画像などで、拡張子がない場合に、
IE10以上のモダンブラウザでは、
HTML5のFileAPIを使うことで、画像ファイルの種類を判別することができます。
しかし、2015年現在でもそれなりにシェアがあり、コーディングのときに対応を求められるIE9は、
FileAPIに対応しておらず、
拡張子のない画像ファイルの種類の判別には、別の方法を使う必要があります。
Javascriptでバイナリデータを取得する｜社員ブログ｜株式会社Qript
↑こちらで、その方法について紹介されていましたので、
実際にやってみました。
↓こちらが作ってみたもの
方法
その方法とは、
Ajaxによりバイナリデータとして画像を読み込み、
先頭に含まれるファイル形式特有のデータを読み取り、
判別するというものです。
| ファイル形式 | 先頭 | 末尾 |
|---|---|---|
| JPEG | FF D8 | FF D9 |
| PNG | 89 50 4E 47 | |
| GIF | 47 49 46 38 |
(http://www.qript.co.jp/blog/technique/215/ より引用)
画像ファイル形式を判定するJavaScriptコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | $(function() { function loadImg(imgUrl) { var xhr = new XMLHttpRequest(), imageFileType = ""; xhr.open('GET', imgUrl, true); xhr.responseType = "arraybuffer"; xhr.onload = function() { if (xhr.readyState === 4) { if (xhr.response) { //モダンブラウザとIE10以上 var bytes = new Uint8Array(xhr.response); } else if (xhr.responseBody !== undefined) { //IE9用 var bytes = VBArray(xhr.responseBody).toArray(); } } if (bytes[0] === 0xff && bytes[1] === 0xd8 && bytes[bytes.length-2] === 0xff && bytes[bytes.length-1] === 0xd9) { imageFileType = "JPEG"; } else if (bytes[0] === 0x89 && bytes[1] === 0x50 && bytes[2] === 0x4e && bytes[3] === 0x47) { imageFileType = "PNG"; } else if (bytes[0] === 0x47 && bytes[1] === 0x49 && bytes[2] === 0x46 && bytes[3] === 0x38) { imageFileType = "GIF"; } else { imageFileType = "OTHER"; } //ファイル形式を出力 $(".example").text(imageFileType); } xhr.send(); } }); |
紹介いただいていた方法だと、IE9では
XMLHttpRequestのresponseTypeが”arraybuffer”に対応していないため、
以下のコードが効きません。
|
1 | xhr.responseType = "arraybuffer"; |
そのため調べてみたところ、
IE9でXMLHttpRequestを使ってバイナリファイルを読み込むやつ · GitHub
↑こちらで紹介されている方法で場合分けすることで、IE9にも対応できました。
Author Profile
SHARE
