Question

我有一个网站，允许通过

上传照片

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

Answer 1

您需要导入一个为您提供EXIF对象的JavaScript库。在页面中包含类似的内容：

＆lt; script src =＆＃34; path / library-min.js＆＃34;＆gt;＆lt; / script＆gt;

其中path可以是多种内容：如果您自己提供库，则CDN URL或相对于您自己的服务器URL路径的路径。 library-min.js不是EXIF库的名称，只是一个示例名称。

Answer 2

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

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

2 个答案: