Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

画像の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 });
oieioi
ハマったポイントをメモする。
https://oieioi.github.io/
tsukulink
建設業マッチングサイト「ツクリンク」の開発・運営
https://tsukulink.co.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away