5

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

如果我对方向进行硬编码（请参阅第二个 loadImage 调用中的“orientation: 3”），我可以旋转它……但我正在尝试使用 loadImage.parseMetaData 来获取方向。

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

当我调用 loadImage.parseMetaData 时，“data.exif”似乎为空。看到这个小提琴：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

为什么你要一个 Blob 而你却要一个新的 Blob？然后元数据会丢失，这就是您丢失它并且 exif 为空的原因。只需更换：

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

经过：

var blob = this.response;

应该做的伎俩。

于 2014-08-04T19:03:26.123 回答
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 回答