5

キャンバスに直接画像をアップロードできる 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 ファイルを読み取り、画像の幅と高さを返しますが、この方法を使用して画像の向きを見つける方法がわかりません。

参考文献 この答え

誰でも私を正しい方向に向けることができますか? どんな助けでも大歓迎です。

4

2 に答える 2

16

前提条件

もちろん、写真を撮るデバイスには、方向を伝えることができるセンサーが実際にあるという依存関係があります。

一部のカメラでは、他のカメラでは実行できません。また、センサーが搭載されている場合でも、画像に EXIF が埋め込まれているという保証はありません。たとえば PNG には EXIF が埋め込まれておらず、一部のアップロード JPEG 画像では、プライバシーやサイズの理由 (GPS 座標など) のために EXIF が削除されています。「Web 用に保存」オプションを使用して保存すると、Photoshop は EXIF を削除します。

さまざまな EXIF コンポーネントを試す

また、使用している EXIF コンポーネントにバグがある可能性もあります。これを排除するために、他の EXIF リーダーも試してみてください。

（そして他にもたくさんあります）。

「生の」方向の検出

EXIF 情報 (つまり、PNG、TIFF、BMP) のない「生の」画像しかない場合は、少なくとも次のようにして画像ビットマップ自体の向きを決定できます。

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

アップロードされた画像要素を関数に渡すだけです。縦向きの場合は true を返し、正方形または横向きの場合は false を返します。

base64 でエンコードされた data-uri しかない場合は、それを画像要素に直接ソースとして設定します。

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

自動検出

コンテンツに基づいて向きを自動的に検出することは非常に困難であり、専門的なアプローチやオープンソースのアプローチでこれを行う試みが数多く行われてきました。しかし、それらが 100% 機能することはありません。

形状、線、その他のオブジェクトを検出して認識するには、かなりのアルゴリズムが必要になります。一大プロジェクト！

ただし、被写体のほとんどが人物/顔である場合は、顔検出を実装できます。最初のパスで何も検出されない場合は、90 度回転して再試行してください。一致した場合は、これを基礎として使用して「適切な推測」を行うことができます (たとえば、顔検出を行うためのこのライブラリを参照してください) 。

于 2013-09-05T18:50:48.807 に答える
1

このため、元の画像を使用していなかったため、方向情報を取得できませんでした。代わりに、HTML キャンバス オブジェクトを使用して圧縮された画像を使用していました。元のアップロードされた画像を使用したところ、機能し始めました。

于 2015-07-02T03:56:25.153 に答える