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

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

我能够去除节点中的元数据并将其上传到亚马逊,但是到达节点服务器时,图像仍然是横向的。

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

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

TL; DR:

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

谢谢<3

我在工作中碰到基本相同的问题。 我们没有find一种方法来删除元数据。 相反,我们通过使用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); 

希望这一点能让你朝正确的方向发展。