5

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

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

我尝试过的事情：

  • 我试过提取 EXIF 信息：

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

但它返回undefined。

参考。这个答案。

  • 我找到了这个小提琴-

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

参考。这个答案

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

4

2 回答 2

16

先决条件

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

有些相机可以，有些则不能。即使它确实有传感器，也不能保证 EXIF 会嵌入到图像中。例如，PNG 没有嵌入 EXIF，有些上传的 JPEG 图像由于隐私和/或尺寸原因（例如 GPS 坐标等）而删除了 EXIF。如果使用其“保存为网络”选项保存，Photoshop 将删除 EXIF。

尝试不同的 EXIF 组件

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

（还有很多其他的）。

检测“原始”方向

如果您只有一个没有任何 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 度并重试。如果你得到一个匹配，那么你可以以此为基础做一个“好的猜测”（例如参见这个库来做面部检测）

于 2013-09-05T18:50:48.807 回答
1

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

于 2015-07-02T03:56:25.153 回答