Geek asks and answers

The Safari img element will not display an image retrieved from a service (e.g. Dropbox) since ArrayBuffer uses a blob url

Services such as Dropbox can upload an image, return file data in various forms, including as an ArrayBuffer array. In Webkit, you can create a blob: URL that refers to the downloaded data, and then set it as the src attribute.

Example: http://jsfiddle.net/Jan_Miksovsky/yy7Zs/ retrieves the image data as an ArrayBuffer array, and then creates the blob: URL and the arms that belong to the img element. This example works in Chrome, but not Safari 6.0.2.

According to Can, I Use ( http://caniuse.com/#feat=bloburls ) and other sources of Safari 6.x supports creating URLs for blob objects. And Safari really supports using createObjectURL through the global webkitURL prefix. However, if the resulting blob URL is passed to the img src element, the image is not displayed.

Is there any other way in Safari to render the resulting image this way?

+5
source share
1 answer

I just answered this question: HTML5 iPhone dynamic image caching

where you can load an image from ajax and convert it to a base64 string. Then you can use this line to load the IMG element.

safary 6.0.4, . ( 6.0.2).

:

function _arrayBufferToBase64( buffer ) {
    var binary = '';
    var bytes = new Uint8Array( buffer );
    var len = bytes.byteLength;
    for (var i = 0; i < len; i++) {
        binary += String.fromCharCode( bytes[ i ] );
    }
    return window.btoa( binary );
}


var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://jsbin.com/images/favicon.png', true);
xhr.responseType = 'arraybuffer';

xhr.onload = function(e) {
        if (this.status == 200) {
          var string_with_bas64_image = _arrayBufferToBase64(this.response);
          document.getElementById("img").src = "data:image/png;base64," + string_with_bas64_image;
        }
};

xhr.send();

:

http://jsbin.com/ivifiy/1/edit

+2

More articles:


All Articles