Data Uri To Object Url With Createobjecturl In Chrome/ff

I have base64 string of an image. How can I convert this to Object URL? The purpose is to try and see if my svg-editor will be faster, by injecting Blob URL to the DOM instead of a

Solution 1:

Try this code.

functiondataURItoBlob(dataURI) {
  var mime = dataURI.split(',')[0].split(':')[1].split(';')[0];
  varbinary = atob(dataURI.split(',')[1]);
  vararray = [];
  for (var i = 0; i < binary.length; i++) {
     array.push(binary.charCodeAt(i));
  }
  returnnew Blob([new Uint8Array(array)], {type: mime});
}

and use it like this

var objecturl = URL.createObjectURL(dataURItoBlob('your data url goes here'));

Solution 2:

What happens if you want to show html in an iframe?

iframe.src = "data:text/html,"+encodeURIComponent( window.btoa(text) );

Solution 3:

If somebody want to save Data URI as an image in server:

Pass Data URI to server by post request:

var imgData = canvas.toDataURL('image/png');
$.post("https://path-to-your-script/capture.php", {image: imgData},
    function(data) {
        console.log('posted');
});

Save image: capture.php

$data = $_POST['image'];

// remove "data:image/png;base64," from image data.
$data = str_replace("data:image/png;base64,", "", $data);

// save to file
file_put_contents("/tmp/image.png", base64_decode($data));