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

Posted 2023-03-06

【中文标题】从文件上传读取网址时图像自动旋转（当它是大图像时）？

【英文标题】：image auto rotates while reading url from file upload (when it's a big image)?

【发布时间】：2017-01-20 04:20:35

【问题描述】：

下面这段代码，

    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） 我怎么解决这个问题？ （我已经测试过当图像尺寸小的时候没有问题，但如果它很大，那么问题就开始了）

【问题讨论】：

看起来你只在客户端旋转图像。将旋转后的文件发送到服务器。

没有比我为这个图像显示编写的代码更多的代码了。我已经检查了服务器文件中的图像并且它是垂直的（因为它必须是）所以它没有水平保存图像。

尝试使用 img.src = URL.createObjectURL(file) 而不是将它们读取为占用大约 3 倍内存的 base64

【参考方案1】：

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

使用 CSS：

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

img 
    image-orientation: from-image;

但目前只有supported by Firefox and Safari。

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

如果您担心浏览器兼容性，您将不得不在服务器端处理您的图像以删除元数据并旋转它们。 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.)
)

【讨论】：

谢谢，因为您指定 css 规则适用于 Firefox 而不适用于 Chrome。我在这个项目上工作也是为了移动友好的使用。所以在平板电脑和手机上它不能正常工作，因为 chrome 无处不在：/

@dee 如果修复此服务器端不是一个选项，那么您仍然可以在客户端修复此问题。我已经编辑了我的答案。

无法使用导入的那个 js。这是在选择文件到预览图像 div 后加载的，但我的第二个代码做到了。我想我会在保存之前尝试缩小图像。因为小图像工作正常，只有大图像不行。我应该尝试在 js 或 asp.net 代码隐藏中变小吗？谢谢