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

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

本文关键字：图像元 图像 元数据 javascript 浏览器      更新时间：2023-09-26

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

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

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

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

博士：

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

谢谢<3

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

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

相关文章：