从文件上传中读取URL时图像自动旋转（当它是一个大图像时）？

Question

以下代码，

    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#img_').attr('src', e.target.result);
            }
            reader.readAsDataURL(input.files[0]);
        }
    }

    $("#inpFile").change(function () {
        readURL(this);
    });

显示如下图像（这是一个2 MB大小的图像）;

读取图像文件的水平视图

我用这段代码解决了这个问题;

$('#inpFile').change(function (e) {
        var file = e.target.files[0];
        canvasResize(file, {
            width: 300,
            height: 0,
            crop: false,
            quality: 100,
            callback: function (data, width, height) {
                $("#img_").attr('src', data);
            }
        });
    });

我将此文件发布到通用处理程序，然后将其保存到文件中。 图像保存到文件右旋转但当我尝试使用innerHtml在代码隐藏中显示它时它再次显示水平。 （就像滑块上的水平视图一样）
我怎么解决这个问题？ （我测试的时候图像尺寸小没问题但是如果它很大那么问题就开始了）

Answer 1

看起来您的图像实际上是水平的，但是方向元属性设置为90度。 由于元数据标签提供的信息，这些图像由现代图像编辑器（以及直接链接到的某些浏览器）自动旋转，这可能意味着您认为它是垂直的。

使用CSS：

尝试将此css规则应用于您的页面并使用Firefox或Safari进行测试：

img {
    image-orientation: from-image;
}

但是目前只支持Firefox和Safari 。

使用第三方工具（服务器端）：

如果您担心浏览器兼容性，则必须在服务器端处理图像以删除元数据并旋转它们。 Imagemagick可以使用-auto-orient来做到这一点

使用Javascript（客户端，浏览器兼容）：

编辑：如果您解析元数据并相应地旋转图像，您也可以在客户端可靠地执行此操作。 或者只使用JavaScript-Load-Image ，它可以为您完成！ 在页面中导入load-image.all.min.js然后只需调用loadImage函数：

loadImage(
    input.files[0],
    function (img) {
        // this callback will be called with the correctly oriented 
        // image element, inject it in your page ay way you want 
        document.body.appendChild(img);
    },
    {maxWidth: 600} // Options, check the project page for 
                    // more of them (scaling, cropping, etc.)
)