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

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.

参考.这个答案.

• 我发现这个小提琴 -

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

参考.这个答案

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

Answer 1

先决条件

当然,设备上存在一种依赖关系,即它实际上有一个可以告诉方向的传感器.

有些相机做别人不做.即使它有传感器,也不能保证EXIF将嵌入图像中.例如,对于PNG没有嵌入EXIF,并且出于隐私和/或尺寸原因(例如,GPS坐标等),一些上载JPEG图像的EXIF被移除.如果使用"Save for web"选项保存,Photoshop将删除EXIF.

尝试不同的EXIF组件

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

• code.flickr.com
• ExifReader
• EXIF-JS

(还有很多其他的).

检测"原始"方向

如果您只有一个没有任何EXIF信息的"原始"图像(即PNG,TIFF,BMP),您至少可以通过这样做来确定图像位图的方向:

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度,请重试.如果你得到一个匹配,那么你可以用它作为基础来做一个"好猜测"(参见例如这个库进行人脸检测)