How to get dataURL from Blob or BlobURL

@thepio is right about how to get a dataURI from a Blob : use a FileReader and its readAsDataURL() method.
This will give you a base64 encoded dataURI representation of the Blob/File.

But, let's take a step back from what you are doing :
You are using a hack to get some kind of a screenshot of your HTML markup, using SVG's foreignObject.

You absolutely don't need the Blob, nor the base64 version to show this in an <img> element :
You just need to set the header of your dataURI to 'data:image/svg+xml; charset=utf8, ' and then append your svg markup, this will save up to 30% of data size.
Some characters need to be encoded though, so you can just call encodeURIComponent(yourSVGMarkup).

var svgString = '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">' +
  '<foreignObject width="100%" height="100%">' +
  '<div xmlns="http://www.w3.org/1999/xhtml" style="height:200px;width:200px;background-color:red;font-size:40px">' +
  '<em></em> l ' +
  '<span style="color:white; text-shadow:0 0 2px blue;">' +
  'I\'m white'+
  '</span>' +
  '</div>' +
  '</foreignObject>' +
  '</svg>';

var dataURI = 'data:image/svg+xml; charset=utf8, ' + encodeURIComponent(svgString);

img.src = dataURI;

<img id="img" />

But this will only save an svg version, which won't work in IE<11 since these browsers didn't support the foreignObject element.

I guess that what you want is a raster version.

For this, you could try to draw your svg on a canvas, using the drawImage method, and then call one of the canvas' export methods (toDataURL() or toBlob()).

But this will taint the canvas in Safari 9, since they have some security issue with foreignObject and on IE<Edge which had a security issue with svg in general. Tainting the canvas will make its export methods unavailable, and the whole operation a failure.

Also, even in browsers that would support it, there is an other big limitation :

• Your elements inside the dataURI version are out of your document, and aren't able to request any other external resource (CSS, fonts, images...) which means that you will need to append it (or a dataURI encoded version for the two lasts) inside the svg markup before transforming it to a dataURI.

Maybe less important but some browser's default styling will disappear on some elements (mostly inputs).

So in your case, I would refrain myself to use this hack.
The only acceptable way to get a raster version of your HTML elements is to draw it using the canvas drawing methods, just like html2canvas and other libraries do.
So I would try to fix the current issue which doesn't seem normal.

If you don't need a raster version, the easiest way is to just save the HTML markup in your db, then append it in your document (be sure you cleaned it though).

You could use FileReader and do it like this:

var data = '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">' +
           '<foreignObject width="100%" height="100%">' +
           '<div xmlns="http://www.w3.org/1999/xhtml" style="height:200px;width:200px;background-color:red;font-size:40px">' +
             '<em></em> l ' + 
             '<span style="color:white; text-shadow:0 0 2px blue;">' +
             '</span>' +
           '</div>' +
           '</foreignObject>' +
           '</svg>';

var DOMURL = window.URL || window.webkitURL || window;
var svg = new Blob([data], {type: 'image/svg+xml;charset=utf-8'});
var url = DOMURL.createObjectURL(svg);

var base64data;

var reader = new window.FileReader();
 reader.readAsDataURL(svg); 
 reader.onloadend = function() {
   base64data = reader.result; 
   document.getElementById("image1").src=base64data;
 }

<img id='image1' width="200px" height="200px"/>

Documentation says this about readAsDataURL:

Starts reading the contents of the specified Blob, once finished, the result attribute contains a data: URL representing the file's data.