CODEWITHSUNDEEP
javascripthtml
syaz
syaz

Reputation: 2679

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 very large base64 string. This is used for editing the SVG only. On save, Object URLs are reconverted to base64 again.

Image size is typically 0.5 MB or bigger.

What I've tried:

var img = ...; //svg <image>
var bb = new BlobBuilder();
var dataStr = img.getAttributeNS(XLINKNS, 'href'); //data:image/jpeg;base64,xxxxxx
//dataStr = dataStr.replace(/data:.+;base64,/i, ''); //Strip data: prefix - tried both with & without
//dataStr = window.atob(dataStr); //tried both with & without

bb.append(dataStr);
var blob = bb.getBlob
img.setAttributeNS(XLINKNS, 'xlink:href', window.URL.createObjectURL(blob)); //blob:xxx

What I get instead is a seemingly corrupted jpeg image.

TIA.

Upvotes: 5

Views: 26022

Answers (3)

Sibin John Mattappallil
Sibin John Mattappallil

Reputation: 1789

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));

Upvotes: 0

Imal Hasaranga Perera
Imal Hasaranga Perera

Reputation: 10029

Try this code.

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

and use it like this

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

Upvotes: 10

Gabamnml
Gabamnml

Reputation: 156

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

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

Upvotes: 0

Related Questions