javascript - Safari iOS 6 - ajax 请求 blob 图像

Question

我有一个主要下载 blob 对象中的图像的功能，它在 chrome、FF、iOS 7+ 上运行良好，但在 iOS 6 上运行不正常...

downloadImage: function( url ) {
        var that = this;
        return new Ember.RSVP.Promise(function( resolve, reject ) {
            var xhr = new XMLHttpRequest();
            xhr.open('GET', url);
            xhr.onreadystatechange = function() {
                if (this.readyState === this.DONE) {
                    that.chart.incrementProgress();
                    if (this.status === 200) {
                        var blob = this.response;
                        resolve( that.imageStore.writeImage( that, url, blob ) );
                    }
                    else {
                        resolve();
                    }
                }
            };
            xhr.responseType = 'blob';
            xhr.send();

        });
    }

在控制台调试器的 iOS6 中，当我想查看我的 blob 对象时，它似乎是一个带有 super 奇怪字符的字符串。我不确定它是否正常或我的请求无法正常工作这个版本的 iOS。

之后我需要将它转换成 base64，所以我使用 FileReader 来实现:

this.writeImage = function( controller, url, blob ) {
        var that = this;
        return new Ember.RSVP.Promise(function( resolve ) {
            var reader = new window.FileReader();
            reader.readAsDataURL(blob);
            reader.onloadend = function() {
                var base64 = reader.result;
                var object = { id: url, key: url, base64: base64 };
                //controller.store.update('image', object).save();
                controller.store.findQuery('image', { key: url })
                .then(function( result ) {
                    var record = result.content[0];
                    record._data.base64 = base64;
                    record.save().then( resolve );
                })
                .catch(function() {
                    controller.store.createRecord('image', object).save().then( resolve );
                });
            };
        });
    };

不要注意 Promise 的东西和其他参数，但是 blob 和 downloadImage 函数中的一样。

并且出于一个神秘的原因，reader.loadend 永远不会被触发，因为 reader 中的状态始终为 0。

我应该为 iOS6 做一些特别的事情还是我的代码是错误的？

[edit] : 好像没有触发 onloadend 回调 ??

[edit2] :经过进一步调查，ajax 请求的响应似乎是一个字符串而不是一个 blob...而且我的 responseType 也设置为 "" 吗？

Answer 1

我现在找到了一个解决方法，我将我的 binaryString 转换成这样的 blob:

function binaryStringToBlob( byteCharacters, contentType ) {
    var sliceSize = 1024;
    var bytesLength = byteCharacters.length;
    var slicesCount = Math.ceil(bytesLength / sliceSize);
    var byteArrays = new Array(slicesCount);

    for (var sliceIndex = 0; sliceIndex < slicesCount; ++sliceIndex) {
        var begin = sliceIndex * sliceSize;
        var end = Math.min(begin + sliceSize, bytesLength);

        var bytes = new Array(end - begin);
        for (var offset = begin, i = 0 ; offset < end; ++i, ++offset) {
            bytes[i] = byteCharacters[offset].charCodeAt(0);
        }
        byteArrays[sliceIndex] = new Uint8Array(bytes);
    }
    return new Blob(byteArrays, { type: contentType });
}

你只需要获取内容类型就可以了!