的先决条件

Question

我正在创建一个Web应用程序，它允许直接在画布上上传图像。有时，当从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，并且出于隐私和/或尺寸原因（例如GPS坐标等），一些上载JPEG图像的EXIF被移除。如果使用“Save for web”选项保存，Photoshop将删除EXIF。

尝试不同的EXIF组件

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

（并且有一个ton of others）。

检测“原始”方向

如果您只有一张没有任何EXIF信息的“原始”图像（即PNG，TIFF，BMP），您至少可以通过这样做来确定图像位图本身的方向：< / p>

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

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

如果您只有base64编码数据，则只需将其直接设置为图像元素：

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画布对象压缩图像。我使用原始上传的图像，它开始工作。

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

2 个答案:

的先决条件

尝试不同的EXIF组件

检测“原始”方向

自动检测