5

JavaScript LoadImage.parseMetaData ( https://github.com/blueimp/JavaScript-Load-Image ) を使用して、Web 上の画像の向きを取得しようとしているので、回転させることができます。

向きをハードコードすると (2 回目の loadImage 呼び出しで「orientation: 3」を参照)、回転できますが、loadImage.parseMetaData を使用して向きを取得しようとしています。

Web ベースの EXIF パーサーを使用しましたが、方向情報が画像に含まれています。

loadImage.parseMetaData を呼び出すと、「data.exif」が null のようです。このフィドルを参照してください: http://jsfiddle.net/aginsburg/GgrTM/13/

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://www.filepicker.io/api/file/U0D9Nb9gThy0fFbkrLJP', true);
xhr.responseType = 'blob';

xhr.onload = function(e) {
    if (this.status == 200) {
        // Note: .response instead of .responseText
        console.log ("got image");
        var blob = new Blob([this.response], {type: 'image/png'});
        console.log("about to parse blob:" + _.pairs(this.response));
        loadImage.parseMetaData(blob, function (data) {
            console.log("EXIF:" + _.pairs(data))
            var ori ="initial";
            if (data.exif) {
                ori = data.exif.get('Orientation');
            }
            console.log("ori is:" + ori);
        });

         var loadingImage = loadImage(
            blob,
            function (img) {
                console.log("in loadingImage");
                document.body.appendChild(img);
            },
            {maxWidth: 600,
             orientation: 3, 
             canvas: true,
             crossOrigin:'anonymous'
            }
        );
        if (!loadingImage) {
            // Alternative code ...
        }

    }
};
xhr.send();

画像を正しく配置するためのアイデアや代替アプローチを歓迎します。

4

3 に答える 3

2

loadImage への呼び出しは、parseMetaData への呼び出しからのコールバック内にある必要があります。

理由: 現状では、コードに競合状態が含まれています。loadImage の呼び出しは、parseMetaData の呼び出しが完了する前に行われる可能性が非常に高く、どちらも非同期呼び出しであるため、オリエンテーションが詰め込まれます。

于 2015-09-10T20:49:06.387 に答える
1

同じ問題があったため、「arrayBuffer」の応答タイプを変更し、応答から blob を作成しました

xhr.responseType = 'arraybuffer';

xhr.onload = function (e) {
if (this.status == 200) {
   var arrayBufferView = new Uint8Array(this.response);
   var blob = new Blob([arrayBufferView], { type: "image/jpeg" });
   ...
于 2015-08-21T15:53:26.830 に答える
1

ブロブを要求したのに、なぜ新しいブロブを作成しているのですか? メタデータは失われます。これが失われ、exif が null である理由です。置き換えるだけです：

var blob = new Blob([this.response], {type: 'image/png'});

に：

var blob = this.response;

トリックを行う必要があります。

于 2014-08-04T19:03:26.123 に答える