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

Question

我正在使用JavaScript LoadImage.parseMetaData（https://github.com/blueimp/JavaScript-Load-Image）尝试获取Web上图像的方向，以便旋转它。

如果我硬编码方向（请参见第二个loadImage调用中的“orientation：3”），我可以旋转它...但我正在尝试使用loadImage.parseMetaData获取方向信息。

我已经使用基于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();

任何正确定向图像的想法或替代方法都受到欢迎。

- aginsburg

---

你解决了这个问题吗？ - Marcus

嗯，我不再使用Filepicker了...最近已经重新开始使用它，因为他们在成功上传后将mimetype回传到blob中。所以我从未测试过下面提出的解决方案，因为它们变得多余了。不确定我应该如何在Stackoverflow上标记这个问题？ - aginsburg

Answer 1

您在调用loadImage时需要将其放置在解析元数据的回调函数内。

原因：当前代码存在竞态条件。由于它们都是异步调用，因此loadImage的调用很可能在parseMetaData完成调用并将方向放入之前被执行。

- Squidious

Answer 2

我遇到了同样的问题，我将响应类型更改为'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" });
   ...

- PvtVandals

Answer 3

为什么要创建一个新的Blob而不是使用已有的Blob？这样会丢失元数据，这就是你正在失去它并且exif为空的原因。只需替换：

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

通过：

var blob = this.response;

应该可以解决问题。

- MaX

---

谢谢@MaX。我已经在jsfiddle中进行了替换，最初也尝试过这样做...但我仍然在控制台日志中看到"ori is:undefined"。 - aginsburg