javascript - 使用 readAsDataURL 检索原始图像时的图像方向

Question

我找不到任何使用 FileReader.readAsDataURL 并在容器中以正确的图像方向 显示结果图像的示例。

所有来 self 的相机和 iPhone 设备的人像图像都有这个问题。只有用adobe photoshop保存的人像照片好像没有这个问题。

这是我在互联网上找到的示例系统之一。我的代码非常相似: http://www.onlywebpro.com/demo/file_reader/reader01.html

上传这张照片时请注意，它是以横向模式加载的:http://www.rafaelsanches.com/IMG_3786.JPG

请注意，当使用浏览器下载图像时，图像实际上是横向显示的。当您将它保存到磁盘并使用取景器打开时，它会以纵向方式预览。 (可能发现者很聪明地使用了 exif 信息)

使用 exif.js 我发现示例图像的 Orientation=8。使用 photoshop 保存的照片的 Orientation=1。

现在，你们建议我如何处理这件事？我应该在 Canvas 上绘制它并根据 exif 信息旋转吗？有人对此有很好的教程吗？以前有人遇到过这个问题吗？

Answer 1

我今天确实遇到了这个问题并解决了...

在创建图像的示例行之后...

这是我做的

var image = $(".uploaded");
                var img = new Image();

                img.src = e.target.result;

                if (img.complete) { // was cached
                    if (img.height < img.width) {
                        $(image).addClass("landscape").removeClass("portrait");

                    }
                    else {
                        $(image).addClass("portrait").removeClass("landscape");
                    }


                }
                else { // wait for decoding
                    img.onload = function () {
                        if (img.height < img.width) {
                            $(image).addClass("landscape").removeClass("portrait");

                        }
                        else {
                            $(image).addClass("portrait").removeClass("landscape");
                        }
                    }
                }