如何从 Canvas 中加载的图像中提取图像方向信息 [英] How to extract image orientation information from image loaded in Canvas

问题描述

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

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

我尝试过的事情:

• 我试过提取 EXIF 信息:

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

但它返回undefined.

参考这个答案.

• 我找到了这个小提琴 -

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

参考这个答案

有人能指出我正确的方向吗?非常感谢任何帮助.

解决方案

先决条件

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

有些相机可以，有些则没有.即使它确实有传感器，也不能保证 EXIF 会嵌入到图像中.例如，没有为 PNG 嵌入 EXIF，一些上传的 JPEG 图像出于隐私和/或大小原因(例如 GPS 坐标等)删除了 EXIF.如果使用其保存为网络"选项保存，Photoshop 将删除 EXIF.

尝试不同的 EXIF 组件

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

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

(还有其他很多).>

检测原始"方向

如果您只有一张没有任何 EXIF 信息(即 PNG、TIFF、BMP)的原始"图像，您至少可以通过执行以下操作来确定图像位图本身的方向:

function isPortrait(img) {var w = img.naturalWidth ||图像宽度，h = img.naturalHeight ||img.height;返回 (h > w);}

只需将上传的图像元素传递给函数即可.纵向返回真，方形或横向返回假.

如果您只有一个 base64 编码的数据 uri，只需将其直接设置为图像元素上的源:

var img = document.createElement('img');img.onload = 函数(){警报(isPortrait(img))；}img.src = <data-uri-here>;

自动检测

根据内容自动检测方向是一件非常困难的事情，已经有很多人尝试使用专业方法和开源方法来做到这一点.但他们从来没有 100% 工作.

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

但是，如果您的拍摄对象主要是人/脸，您可以实施人脸检测.如果您在第一遍未检测到任何内容，请旋转 90 度并重试.如果你得到一个匹配，那么你可以以此为基础来做一个好的猜测"(参见例如 this做人脸检测的库)

I am creating a web app in which it allows image upload directly in the canvas. Sometimes, when images are uploaded from iPad or other such devices, they are oriented differently.

I am trying to find a way to extract their orientation info and accordingly rotate the image in canvas.

Things I've tried:

• I've tried extracting EXIF information :

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

But it returns undefined.

Ref. this answer.

• I found this fiddle -

  It reads the Base-64 PNG file and returns width and height of the image but I don't know how to find orientation of the image using this method.

Ref. this answer

Can anyone please point me in right direction? Any help is much appreciated.

解决方案

Prerequisites

There is of course a dependency here on the device that takes the picture that it actually has a sensor that can tell orientation.

Some cameras do others don't. And even if it does have a sensor there is no guarantee EXIF will be embedded in the image. EXIF is not embedded for PNG for example and some upload JPEG images where EXIF is removed for privacy and/or size reasons (eg. GPS coordinates etc.). Photoshop will remove EXIF if saved out using its "Save for web" option.

Try different EXIF components

There is also the possibility that the EXIF component you are using has a bug. Try other EXIF readers out there as well to eliminate this:

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

(and there are a ton of others).

Detecting "raw" orientation

In case you only have an "raw" image without any EXIF information (ie. PNG, TIFF, BMP) you can at least determine the orientation of the image bitmap itself by doing this:

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

Just pass the uploaded image element to the function. It will return true if in portrait or false if square or landscape.

If you only have a base64 encoded data-uri just set that as source directly on an image element:

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

Automatic detection

To automatically detect orientation based on content is a very hard thing to do and there has been many attempts doing this with professional approaches and open source approaches. But they never work 100%.

You will need quite a bit of algorithms to detect and recognize shapes, lines, other objects. A huge project!

However, if your subjects are mostly person/faces you can implement face detection. If you don't detect any at the first pass rotate 90 degrees and try again. If you get a match then you can use this as basis to do a "good guess" (see for example this library to do face detection)

这篇关于如何从 Canvas 中加载的图像中提取图像方向信息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！