如何从Blob或BlobURL获取dataURL

Question

I need to take a ScreenShot of a div and need to send it to server(Java) to store.The existing code in my company project used Html2Canvas.js where it's getting the element(div,body ...) and returning the base64 dataURI, it's working fine but freezing the application in Chrome. So i am looking for some other solution and found the below code from stack overflow.

 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); document.getElementById("image1").src=url; 

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

Here url i am getting is Blob-Url (blob:https%3A//fiddle.jshell.net/a5b366a2-ff0c-4c7b-9b20-a80395d7f536) which i am able to use as img src or if i directly open that url in a new tab it's also opening. Is there anyway to get the base64 dataUri like this (data:image/png;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAA) from that blob URL or Blob object ?

Answer 1

@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, ' '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).

Answer 2

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.