如何在上载之前在浏览器中剥离图像元数据（javascript）

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

我能够剥离节点中的元数据并上传到amazon，但是当图像到达节点服务器时，它们仍然是横向的

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

翻转it服务器端的问题是： 1.过于昂贵的性能方面。 2.在上传之前，客户端仍会在浏览器预览中看到一个侧面图像

TL；博士： 因此，我只是想知道是否有人能为我指明正确的方向，在向用户显示图像时，如何从浏览器中的图像中删除元数据

---

谢谢我在工作中遇到了基本相同的问题。我们没有找到删除元数据的方法。相反，我们通过使用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);

---

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

这不是个坏主意。然后我只需要从画布生成blob并将其传递到

fileReader

API，这样我就可以上传它了。我根据@Seamus的想法编写了一个小库，支持所有8个方向。