Question

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

来自我的相机和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。

现在，你们怎么建议我这样做？我应该在画布上绘制它并根据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");
                        }
                    }
                }

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

1 个答案: