如何在上传之前在浏览器中删除图像元数据（javascript） [英] How to strip image metadata in the browser before upload (javascript)

问题描述

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

I am uploading images to a node js server, and sending them to AWS S3 for use on my site. Images that were taken on iOS devices sometimes show up sideways in the browser and I've already figured out that it's due to some of the metadata that iOS attaches to every image which includes the orientation of the phone at the time of capturing the image. It seems like all images which were taken in portrait orientation are flipped sideways in certain browsers (including Chrome on OSX).

我能够删除节点中的元数据并上传但对于亚马逊来说，当图像到达节点服务器时它们仍然是侧面的。

I am able to strip the metadata in node and upload to amazon, however the images are still sideways when they reach the node server.

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

Seems like the most efficient solution would be to strip the metadata when the client selects the image files, and upload them with the correct orientation, however I realize that it's also possible to detect the metadata orientation and flip the image accordingly from the node server.

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

The problem with flipping it server side is: 1. Too expensive performance-wise. 2. The client still see's a sideways image in the browser preview before uploading.

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

So I'm just wondering if anyone could point me in the right direction for how to remove metadata from an image in the browser, while the image is being displayed to the user?

谢谢< 3

推荐答案

我在工作中遇到了基本相同的问题。我们没有找到删除元数据的方法。相反，我们通过使用exif.js读取元数据来解决它，然后在适当旋转它的同时将图像绘制到画布上。模糊地这样：

I ran into basically the same problem at work. We didn't find a way to remove the metadata. Instead we solved it by using exif.js to read the metadata, and then drew the image onto a canvas while rotating it appropriately. Vaguely something like this:

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

希望这指向正确的方向。

Hopefully that points you in the right direction.

这篇关于如何在上传之前在浏览器中删除图像元数据（javascript）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！