javascript 如何从 Canvas 中加载的图像中提取图像方向信息
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18632356/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to extract image orientation information from image loaded in Canvas
提问by Shivang Doshi
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.
我正在创建一个网络应用程序，它允许直接在画布中上传图像。有时，当从 iPad 或其他此类设备上传图像时，它们的方向会有所不同。
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);
我试过提取 EXIF 信息：
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.
但它返回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.
我找到了这个小提琴-
它读取 Base-64 PNG 文件并返回图像的宽度和高度，但我不知道如何使用此方法找到图像的方向。
Ref. this answer
参考 这个答案
Can anyone please point me in right direction? Any help is much appreciated.
任何人都可以指出我正确的方向吗？任何帮助深表感谢。
回答by
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.
有些相机可以，有些则没有。即使它确实有传感器，也不能保证 EXIF 会嵌入到图像中。例如，没有为 PNG 嵌入 EXIF，一些上传的 JPEG 图像出于隐私和/或大小原因（例如 GPS 坐标等）删除了 EXIF。如果使用其“保存为网络”选项保存，Photoshop 将删除 EXIF。
Try different EXIF components
尝试不同的 EXIF 组件
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:
您使用的 EXIF 组件也有可能存在错误。尝试其他 EXIF 阅读器也可以消除这种情况：
(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 bitmapitself by doing this:
如果您只有一个没有任何 EXIF 信息的“原始”图像（即 PNG、TIFF、BMP），您至少可以通过执行以下操作来确定图像位图本身的方向：
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.
只需将上传的图像元素传递给函数。如果是纵向，则返回 true，如果方形或横向，则返回 false。
If you only have a base64 encoded data-uri just set that as source directly on an image element:
如果您只有 base64 编码的 data-uri，只需将其直接设置为图像元素上的源：
var img = document.createElement('img');
img.onload = function() {
alert(isPortrait(img));
}
img.src = <data-uri-here>;
Automatic detection
自动检测
To automatically detect orientation based on contentis 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%.
根据内容自动检测方向是一件非常困难的事情，已经有很多尝试使用专业方法和开源方法来做到这一点。但他们从来没有 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)
但是，如果您的拍摄对象主要是人/脸，您可以实施人脸检测。如果您在第一遍未检测到任何内容，请旋转 90 度并重试。如果你得到匹配，那么你可以使用它作为基础来做一个“好的猜测”（例如，参见这个库来进行人脸检测）
回答by Manik Mittal
For this I was not able to get the orientation info because I was not using original image. Instead, I was using image compressed using the HTML canvas object.I used the original uploaded image and it started working.
为此，我无法获得方向信息，因为我没有使用原始图像。相反，我使用的是使用 HTML 画布对象压缩的图像。我使用了原始上传的图像并开始工作。
