如何从 Canvas 中加载的图像中提取图像方向信息

Question

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

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

我尝试过的事情：

• 我试过提取EXIF信息：

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

但它返回undefined。

参考。 this answer。

• 我找到了this fiddle -

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

参考。 this answer

谁能指出我正确的方向？非常感谢任何帮助。

Answer 1

先决条件

这里当然依赖于拍摄照片的设备，它实际上有一个可以判断方向的传感器。

有些相机不具备其他功能。即使它确实有传感器，也不能保证 EXIF 会嵌入到图像中。例如，PNG 没有嵌入 EXIF，有些上传 JPEG 图像，其中 EXIF 出于隐私和/或大小原因（例如 GPS 坐标等）而被删除。如果使用“保存为网络”选项保存，Photoshop 将删除 EXIF。

尝试不同的 EXIF 组件

您使用的 EXIF 组件也有可能存在错误。尝试使用其他 EXIF 阅读器来消除这种情况：

• code.flickr.com
• ExifReader
• exif-js

（还有一个ton of others）。

检测“原始”方向

如果您只有一个没有任何 EXIF 信息（即 PNG、TIFF、BMP）的“原始”图像，您至少可以通过以下方式确定图像位图本身的方向：

function isPortrait(img) {
    var w = img.naturalWidth || img.width,
        h = img.naturalHeight || img.height;
    return (h > w);
}

只需将上传的图像元素传递给函数。如果是纵向则返回 true，如果是方形或横向则返回 false。

如果您只有 base64 编码的 data-uri，只需将其设置为直接在图像元素上的源：

var img = document.createElement('img');
img.onload = function() {
    alert(isPortrait(img));
}
img.src = <data-uri-here>;

自动检测

根据内容自动检测方向是一件非常困难的事情，并且已经有很多尝试使用专业方法和开源方法来做到这一点。但它们永远不会 100% 工作。

您将需要相当多的算法来检测和识别形状、线条和其他对象。一个巨大的工程！

但是，如果您的主题主要是人/脸，您可以实施人脸检测。如果您在第一次通过时未检测到任何内容，请旋转 90 度并重试。如果你得到一个匹配，那么你可以以此为基础做一个“好的猜测”（例如参见this library to do face detection）

Answer 2

为此，我无法获取方向信息，因为我没有使用原始图像。相反，我使用的是使用 HTML 画布对象压缩的图像。我使用了原始上传的图像，它开始工作了。