gpt4 book ai didi

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

转载 作者:搜寻专家 更新时间:2023-11-01 04:50:32 24 4
gpt4 key购买 nike

我正在创建一个网络应用程序,它允许直接在 Canvas 中上传图像。有时,当从 iPad 或其他类似设备上传图像时,它们的方向不同。

我正在尝试找到一种方法来提取他们的方向信息并相应地在 Canvas 中旋转图像。

我尝试过的事情:

  • 我试过提取 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

谁能给我指出正确的方向?非常感谢任何帮助。

最佳答案

先决条件

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

有些相机可以,有些则不行。即使它确实有传感器,也不能保证 EXIF 会嵌入图像中。例如,EXIF 没有为 PNG 嵌入,有些上传 JPEG 图像,其中出于隐私和/或尺寸原因(例如 GPS 坐标等)删除了 EXIF。如果使用“保存为 web”选项保存,Photoshop 将删除 EXIF。

尝试不同的 EXIF 组件

也有可能您使用的 EXIF 组件存在错误。也尝试使用其他 EXIF 阅读器来消除此问题:

(还有一个 ton of others )。

检测“原始”方向

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

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

只需将上传的图像元素传递给函数即可。如果是纵向,它将返回 true,如果是正方形或横向,它将返回 false。

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

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

自动检测

要根据内容 自动检测方向是一件非常困难的事情,并且已经有很多尝试使用专业方法和开源方法来做到这一点。但它们永远不会 100% 有效。

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

但是,如果您的主题主要是人/脸,您可以实现人脸检测。如果您在第一次通过时没有检测到任何东西,请旋转 90 度并重试。如果你得到一个匹配,那么你可以以此为基础来做一个“好的猜测”(例如参见 this library to do face detection )

关于javascript - 如何从 Canvas 中加载的图像中提取图像方向信息,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18632356/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com