如何在浏览器上传之前去除图像元数据（使用javascript）

Question

我正在将图像上传到Node.js服务器，并将它们发送到AWS S3以在我的网站上使用。在iOS设备上拍摄的图像有时会在浏览器中显示为侧向，我已经发现这是由于iOS附加到每个图像的一些元数据导致的，其中包括捕获图像时手机的方向。似乎所有以纵向方向拍摄的图像在某些浏览器（包括OSX上的Chrome）中都会侧倒。

我能够在节点中删除元数据并上传到Amazon，但是当它们到达节点服务器时，图像仍然是侧向的。

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

翻转服务器端的问题是： 1. 性能太昂贵。 2. 客户端在上传之前仍然在浏览器预览中看到侧向的图像。

简而言之，我想知道是否有人可以指导我如何在图像在向用户显示时从浏览器中删除元数据？

谢谢 <3

- heckascript

---

https://github.com/bennoleslie/jsjpegmeta - Assaf Lavie

Answer 1

我在工作中遇到了基本相同的问题。我们无法找到删除元数据的方法。但是，我们通过使用 exif.js 读取元数据，然后将图像绘制到画布上并适当旋转来解决了这个问题。类似于以下示例：

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

希望这能把你引到正确的方向。

- Seamus

---

这不是个坏主意。然后我只需要从画布生成 blob，并将其传递给 fileReader API，以便上传它。 - heckascript

我基于@Seamus的想法编写了一个小型库，并支持所有8个方向 https://github.com/buunguyen/exif-orient。 - Buu