在客户端从 base64 图像字符串（使用 javascript 或 jquery）中提取 exif答案

【问题标题】：extract exif from base64 image string (using javascript or jquery), on client side在客户端从 base64 图像字符串（使用 javascript 或 jquery）中提取 exif
【发布时间】：2014-01-29 15:47:12
【问题描述】：

我有一个网站，允许通过

上传照片

<input type="file">

onChange，我的 javascript 获取上传的图片，将其转换为 base64，并将其显示为 html 的背景。

酷。

问题：当我将移动设备拍摄的照片放在 html 元素上时，它们会显示为横向或倒置（“旋转”）。

我一直在做研究，发现解决方案是从图像文件中读取 EXIF 值，它包含了图像在屏幕上显示时应该以哪种方式定向的答案。

过去 3 天我一直在尝试提取我的 base64 图像的 exif 值，但还没有走得很远。

我尝试使用库 exif.js，但得到了许多无法识别的字符作为我的回报：

<script>            
    var isaacImg = "data:image/gif;base64,R0lGODlh...hB0SlBCBMQiB0UjIQA7"
    var x = decode64(isaacImg);
    console.log(x);
</script>

我还尝试了this stackOverflow answer 中的以下代码，但我的浏览器无法识别对象 EXIF：

<script>
    var b64 = "data:image/jpeg;base64,/9j/4AAQSkZJRgABA......";
    var bin = atob(b64.split(',')[1]);
    var exif = EXIF.readFromBinaryFile(new BinaryFile(bin));
    alert(exif.Orientation); 
</script>

【问题讨论】：

你找到这个问题的答案了吗？
EXIF来自以下插件github.com/exif-js/exif-js

标签： javascript image-processing base64

【解决方案1】：

我发现下面的 base64 转换库适合我的要求。 http://jsbase64.codeplex.com/。您可能也想尝试一下。

【讨论】：

【解决方案2】：

您需要导入一个为您提供 EXIF 对象的 javascript 库。在页面的 head 部分中包含类似这样的内容：

其中路径可以是很多东西：CDN url 或相对于您自己的服务器 url 根路径的路径（如果您自己提供库）。 library-min.js 不是 EXIF 库的名称，只是一个示例名称。

【讨论】：