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大小的图像）;

horizontal view on image file read

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

$('#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在代码隐藏中显示它时它再次显示水平。（像这样horizontal view on slider）
我怎么解决这个问题？（我已经测试过图像尺寸小没问题，但如果它很大则问题就开始了）

Answer 1

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

使用CSS：

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

img {
    image-orientation: from-image;
}

但目前只有supported by Firefox and 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.)
)

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

1 个答案:

使用CSS：

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

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