14

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- ..."

Jordan Running
  • 102,619
  • 17
  • 182
  • 182
stackHelp
  • 193
  • 1
  • 2
  • 13

1 Answers1

13

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/

Musa
  • 96,336
  • 17
  • 118
  • 137
  • Thanks Musa. Is there a method that retrives just the blob data part (skios the origin ) in javascript ? – stackHelp Feb 09 '15 at 17:59
  • Do you mean get the string `blob:/72438-4637-23673-34721` instead of `blob:null/72438-4637-23673-34721`? or the actual data in the blob? – Musa Feb 09 '15 at 18:07
  • I mean the string blob:/72438-4637-23673-34721. Would it be right to extract out the null, is there any function in javascript that does similar stuff ? – stackHelp Feb 10 '15 at 03:26