Convert SVG dataUrl to base64

Question

I'm using a plugin (dom-to-image) to generate a SVG content from a div. It returns me a dataURL like this:

data image/xml, charset utf-8, <svg...

If a put this on a <img src the image is shown to normally.

The intent is to grab this dataURL, convert it to base64 so I can save it as an image.png on a mobile app.

Is it possible?

I tryied this solution https://stackoverflow.com/a/28450879/1691609 But coudn't get to work. The console fire an error about the dataUrl

TypeError: Failed to execute 'serializeToString' on 'XMLSerializer': parameter 1 is not of type 'Node'.

==== UPDATE :: PROBLEM EXPLANATION/HISTORY ====

I'm using Ionic Framework, so my project is an mobile app. The dom-to-image is already working cause right now, its rendering a PNG through toPng function. The problem is the raster PNG is a blurry.

So I thought: Maybe the SVG will have better quality. And it IS!! Its 100% perfect, actually.

On Ionic, I'm using 2 step procedure to save the image. After get the PNG generated by the dom-to-img(base64) dataURL, I convert it to a Blob and then save into device. This is working, but the final result, as I said, is blurry.

Then with SVG maybe it will be more "high quality" per say.

So, in order to do "minimal" change on a process that s already working :D I just need to convert an SVG into base64 dataURL....

Or, as some of you explained to me, into something else, like canvas... I don't know any much :/

===

Sorry for the long post, and I really, really thank your help guys!!

Answer 1

EDIT COUPLE OF YARS LATER

• Use JS fiddle for a working example: https://jsfiddle.net/msb42ojx/
• Note, if you don't own DOM content (images), and those images don't have CORS enabled for everyone (Access-Control-Allow-Origin header), canvas cant render those images

I'm not trying to find out why is your case not working, here is how I did when I had something similar to do:

• get the image sourcce (dom-to-image result)
• set up a canvas with that image inside (using the image source)
• download the image from canvas in whatever image you like: png, jpeg whatever

by the way you can resize the image to a standard format

document.getElementById('mydownload').onclick= function(){
  var wrapper = document.getElementById('wrapper');
  //dom to image
  domtoimage.toSvg(wrapper).then(function (svgDataUrl) {
  //download function    
  downloadPNGFromAnyImageSrc(svgDataUrl);
  });
}
function downloadPNGFromAnyImageSrc(src)
{
  //recreate the image with src recieved
  var img = new Image;
  //when image loaded (to know width and height)
  img.onload = function(){
    //drow image inside a canvas
    var canvas = convertImageToCanvas(img);
    //get image/png from convas
    var pngImage =  convertCanvasToImage(canvas);
    //download
    var anchor = document.createElement('a');
    anchor.setAttribute('href', pngImage.src);
    anchor.setAttribute('download', 'image.png');
    anchor.click();
  };
  
  img.src = src;


    // Converts image to canvas; returns new canvas element
  function convertImageToCanvas(image) {
        var canvas = document.createElement("canvas");
        canvas.width = image.width;
        canvas.height = image.height;
        canvas.getContext("2d").drawImage(image, 0, 0);
        return canvas;
    }
    
    
    // Converts canvas to an image
    function convertCanvasToImage(canvas) {
        var image = new Image();
        image.src = canvas.toDataURL("image/png");
        return image;
    }
}

#wrapper{
  background: red;
  color: blue;
}

<script src="https://rawgit.com/tsayen/dom-to-image/master/src/dom-to-image.js"></script>
<button id='mydownload'>Download DomToImage</button>
<div id="wrapper">
  <img src="http://i.imgur.com/6GvKdxY.jpg"/>
  <div> DUDE IS WORKING</div>
  <img src="http://i.imgur.com/6GvKdxY.jpg"/>
</div>

Answer 2

I translated @SilentTremor's solution into React/JS-Class:

class SVGToPNG {
  static convert = function (src) {
    var img = new Image();

    img.onload = function () {
      var canvas = SVGToPNG.#convertImageToCanvas(img);
      var pngImage = SVGToPNG.#convertCanvasToImage(canvas);

      var anchor = document.createElement("a");
      anchor.setAttribute("href", pngImage.src);
      anchor.setAttribute("download", "image.png");
      anchor.click();
    };

    img.src = src;
  };

  static #convertImageToCanvas = function (image) {
    var canvas = document.createElement("canvas");
    canvas.width = image.width;
    canvas.height = image.height;
    canvas.getContext("2d").drawImage(image, 0, 0);
    return canvas;
  };

  static #convertCanvasToImage = function (canvas) {
    var image = new Image();
    image.src = canvas.toDataURL("image/png");
    return image;
  };
}

export default SVGToPNG;

Usage:

let dataUrl = someCanvas.toDataURL("image/svg+xml");
SVGToPNG.convert(dataUrl);