图片自动旋转，同时读取url从文件上传(当它'一个大的图像)

image auto rotates while reading url from file upload (when it's a big image)?

本文关键字：当它 图像 一个 旋转 文件 url 读取      更新时间：2023-09-26

下面的代码

    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);
    });

显示如下图像(这是一个2mb大小的图像);

水平视图读取图像文件


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

$('#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在代码后面显示它们时，它再次显示水平。(就像这个滑动条上的水平视图)
我该如何解决这个问题?(我已经测试过，当图像大小小没有问题，但如果它是大的，然后问题开始)

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

用CSS

:

试着将这个css规则应用到你的页面上，并在Firefox或Safari上进行测试:

img {
    image-orientation: from-image;
}

但是目前只有Firefox和Safari支持。

使用第三方工具(服务器端):

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

使用Javascript(客户端，浏览器兼容):

Edit:如果您解析元数据并相应地旋转图像，您也可以在客户端可靠地完成此操作。或者只是使用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.)
)
相关文章：