如何在上传前在浏览器中去除图像元数据 (javascript)

Question

我正在将图像上传到节点 js 服务器，然后将它们发送到 AWS S3 以便在我的网站上使用。在 iOS 设备上拍摄的图像有时会在浏览器中横向显示，我已经发现这是由于 iOS 附加到每张图像的一些元数据，其中包括 [= =29=] 在捕获图像时。似乎所有纵向拍摄的图像在某些浏览器中都会横向翻转（包括 OSX 上的 Chrome）。

我可以剥离节点中的元数据并上传到亚马逊，但是图像在到达节点服务器时仍然是横向的。

似乎最有效的解决方案是在客户端选择图像文件时剥离元数据，并以正确的方向上传它们，但我意识到也可以检测元数据方向并相应地翻转图像来自节点服务器。

翻转服务器端的问题是： 1. 性能方面太贵了。 2.客户端在上传前在浏览器预览中看到的还是一张侧身图片

长话短说：

所以我只是想知道是否有人可以为我指明正确的方向，了解如何在向用户显示图像时从浏览器中的图像中删除元数据？

谢谢 <3

Answer 1

我运行在工作中遇到了基本相同的问题。我们没有找到删除元数据的方法。相反，我们通过使用 exif.js 读取元数据来解决它，然后将图像绘制到 canvas 上，同时适当地旋转它。大概是这样的：

var exif = EXIF.findEXIFinJPEG(binary);

switch(exif.Orientation){
    case 1: //no change needed
        break;
    case 2: //horizontal flip
        context.translate(imageWidth, 0);
        context.scale(-1, 1);
        break;

    ...

    case 8: //rotate 90 deg left
        context.rotate(-0.5 * Math.PI);
        context.translate(-imageWidth, 0);
        break;
}

context.drawImage(image, 0, 0, imageWidth, imageHeight);

希望这能为您指明正确的方向。

如何在上传前在浏览器中去除图像元数据 (javascript)

How to strip image metadata in the browser before upload (javascript)

javascript

metadata

image

ios

长话短说：