https://github.com/blueimp/JavaScript-Load-Image/releases
https://www.fxsitecompat.dev/ja/docs/2020/jpeg-images-are-now-rotated-by-default-according-to-exif-data/
2020年5月現在、スマホで撮った写真をブラウザ表示するとき回転方向を正しく調整するためにJavaScript-Load-Imageを使って回転させる時、chromeだと正しくない方向に回転してしまう問題が発生した。
原因はおそらくchrome81、Firefox 75以降、image-orientation CSS プロパティの初期値が none から from-image に変わったこと。
対策は、最新の Load-Image を利用するように変更すること。v5.11.0を利用するようにすると問題は解決した。
ただしバージョンアップに伴い、DateTimeOriginalやGPS座標の取得方法が少々変わっていたため、調整が必要だった。
以下は単純な現象再現用html。
<!DOCTYPE html>
<html lang="ja">
<head>
<script src="./load-image.all.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
document.querySelector("#fulImage").addEventListener("change", function(e) {
var file = this.files[0];
loadImage.parseMetaData(file, function(data) {
var options = {
canvas: true,
orientation: data.exif.get("Orientation")
};
loadImage(file, function(canvas) {
document.querySelector("#imgPhoto").src = canvas.toDataURL(file.type);
}, options);
});
});
});
</script>
</head>
<body>
<img id="imgPhoto" width="300" height="300">
<input type="file" id="fulImage">
</body>
</html>
