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

Question

我将图像上传到节点js服务器,并将它们发送到AWS S3以便在我的站点上使用.在iOS设备上拍摄的图像有时会在浏览器中侧向显示,我已经发现它是由于iOS附加到每个图像的一些元数据,包括捕获图像时手机的方向.在某些浏览器(包括OSX上的Chrome)中,似乎所有以纵向拍摄的图像都会在侧面翻转.

我能够在节点中剥离元数据并上传到亚马逊,但是当它们到达节点服务器时,图像仍然是侧面的.

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

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

TL; DR:

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

谢谢<3

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

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