Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

URL.createObjectURL returns a blob with null prepended. Eg : Blob:null/12415-63

blob has null prepended at the start eg : blob:null/72438-4637-23673-34721. But when I use the same as a src to the , it shows up the correct image.

I am using URL.createObjectURL call. I also tried using webkitURL. Both return a blob with null appended at the start. Also the blob value returned by URL and webkitURL are not the same.

Here is the code snippet

        var dataUrl = canvas.toDataURL();

        // The last piece of the data URL after the comma
        var byteString = atob(dataUrl.split(',')[1]);

        // Populate an array buffer
        var arrayBuffer = new ArrayBuffer(byteString.length);
        var uint8Array = new Uint8Array(arrayBuffer);
        for (var i = 0; i < byteString.length; i++) {
            uint8Array[i] = byteString.charCodeAt(i);
        }

        var blob = new Blob([uint8Array], { type: "image/png" });
        var blobVal = URL.createObjectURL(blob);

Here the blobVal has "blob:null/1234-5678-9012- ..."

like image 778
stackHelp Avatar asked Feb 07 '15 02:02

stackHelp


People also ask

What does URL createObjectURL return?

createObjectURL is a static method provided by the URL Web API. Returns a DOMString containing a unique blob URL, that is a URL with blob: as its scheme, followed by an opaque string uniquely identifying the object in the browser.

What does Blob in URL mean?

The Blob object represents a blob, which is a file-like object of immutable, raw data; they can be read as text or binary data, or converted into a ReadableStream so its methods can be used for processing the data. Blobs can represent data that isn't necessarily in a JavaScript-native format.

What is Blob URL in JavaScript?

A URL that was created from a JavaScript Blob can not be converted to a "normal" URL. A blob: URL does not refer to data the exists on the server, it refers to data that your browser currently has in memory, for the current page.

How do I create a Blob URL?

You can use URL. createObjectURL() to create Blob url. The URL. createObjectURL() static method creates a DOMString containing a URL representing the object given in the parameter.


1 Answers

That's the origin, file system and sandboxed iframes(maybe others) have null as their origin. If you set up a local sever it should say http%3A//localhost, that's http://localhost url encoded

    var arrayBuffer = new ArrayBuffer(100);
	var uint8Array = new Uint8Array(arrayBuffer);
	for (var i = 0; i < 100; i++) {
		uint8Array[i] = i;
	}

	var blob = new Blob([uint8Array], { type: "image/png" });
	var blobVal = URL.createObjectURL(blob);
	$('div').html(blobVal);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>

This one sais http%3A//fiddle.jshell.net
http://jsfiddle.net/thsn3ayp/

like image 172
Musa Avatar answered Nov 15 '22 18:11

Musa