javascript - 无法使用loadImage.parseMetaData获取EXIF信息

我正在使用JavaScript LoadImage.parseMetaData(https://github.com/blueimp/JavaScript-Load-Image)尝试获取网络上图像的方向，因此可以旋转它。

如果我对方向进行硬编码(请在第二个loadImage调用中参见“orientation:3”)，则可以旋转它...但是我试图使用loadImage.parseMetaData来获取Orientation。

我已使用基于Web的EXIF解析器，并且图像中有方向信息。

当我调用loadImage.parseMetaData时，“data.exif”似乎为空。看到这个 fiddle :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();

欢迎使用任何想法或其他方法来正确定位图像。

最佳答案

您对loadImage的调用必须位于对parseMetaData的调用的回调中。

原因:按原样，您的代码包含竞争条件。由于parseMetaData都是异步调用，因此很可能在调用parseMetaData完成并填充方向之前进行loadImage调用。