画像の Orientation を補正して表示してくれる loadImage がIE11で動かなかった #JavaScript

画像のEXIF情報を読んで補正してくれるライブラリ https://github.com/blueimp/JavaScript-Load-Image を使っていて、IE11でOrientationの向きが反映されなかったのでメモ。

原因は loadImage にURLを渡していたからだった。IE11の場合URLを渡すと画像のメタ情報を取れないみたい。

If the file is given as URL and the browser supports the fetch API, fetches the file as Blob to be able to parse the meta data.

README.md に書いてあった。 fetch APIに対応していないブラウザはURLで渡すとメタ情報を作れない。

example.js


// URL
loadImage('http://example.org/some-image.png', function(img, data){
  // IE11だとundefined
  console.log(data.exif);
}, { orientation: true });

// blob
loadImage(document.querySelector('input[type=file]').files[0], function(img, data){
  console.log(data.exif); // 何か出る
}, { orientation: true });