如何从在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））; 
   alert（exif.Orientation）; 
    

但返回 undefined 。

参考。 此答案 。

• 我发现 这个小提琴 -

  
  
  

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

此答案

任何人请指正我的方向？非常感谢任何帮助。

解决方案

前提条件

当然，这里的依赖在设备上拍摄的图片，它实际上有一个传感器，可以告诉方向。

一些相机做别人不。即使它有一个传感器，也不能保证EXIF将嵌入到图像中。 EXIF没有为PNG嵌入，例如某些上传JPEG图像，其中EXIF因隐私和/或大小原因（例如GPS坐标等）被删除。 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）; 
} 
  

只需将上传的图像元素传递给函数。

如果你只有一个base64编码的数据 - uri只是直接设置为图像元素上的源：

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

自动检测

基于内容是一件非常辛苦的事情，并且已经有许多尝试使用专业方法和开源方法。但他们从不工作100％。

你需要相当多的算法来检测和识别形状，线条和其他对象。一个巨大的项目！

但是，如果你的主题主要是人/面孔，你可以实现面部检测。如果您在第一次通过时未检测到任何旋转，请旋转90度，然后重试。如果你得到一个匹配，那么你可以使用它作为基础做一个好的猜测（例如参见这个库做面部检测）

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屋！