相关疑难解决方法(0)

我想根据相机在JPEG EXIF图像数据中设置的原始旋转来旋转照片.诀窍是所有这一切都应该在浏览器中使用JavaScript和<canvas>.

JavaScript如何访问JPEG,本地文件API对象,本地<img>或远程<img>,EXIF数据来读取旋转信息？

服务器端的答案不对; 我正在寻找客户端解决方案.

我正在创建一个Web应用程序,它允许直接在画布上上传图像.有时,当从iPad或其他此类设备上传图像时,它们的方向不同.

我试图找到一种方法来提取他们的方向信息,并相应地在画布中旋转图像.

我试过的事情:

• 我试过提取EXIF信息:

  dataUrl = canvas.toDataURL('image/jpeg');
  var bin = atob(dataUrl.split(',')[1]);
  var exif = EXIF.readFromBinaryFile(new BinaryFile(bin));
  alert(exif.Orientation);
  

  Run Code Online (Sandbox Code Playgroud)

但它回来了undefined.

参考.这个答案.

• 我发现这个小提琴 -

  它读取Base-64 PNG文件并返回图像的宽度和高度,但我不知道如何使用此方法查找图像的方向.

参考.这个答案

谁能指点我正确的方向？任何帮助深表感谢.

我有一个网站，允许通过

<input type="file">

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

凉爽的。

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

我一直在做研究，发现解决这个问题的方法是从图像文件中读取 EXIF 值，该值包含图像在屏幕上显示时应定向的答案。

在过去的三天里，我一直在尝试提取我的 base64 图像的 exif 值，但还没有取得多大进展。

我尝试使用库 exif.js，但返回时出现大量无法识别的字符：

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

我还尝试了此 stackOverflow 答案中的以下代码，但我的浏览器无法识别对象 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>