I have a code that converts a chart into svg. but I need the output format to be a PNG image. svgString2Image is the function that returns a codified base64 svg. How can I do it? thank you very much.

function svgString2Image( svgString, width, height, format, callback ) {
  //console.log("svgString",svgString)
    format ? format : 'png';

    var imgsrc = 'data:image/svg+xml;base64,'+ btoa( unescape( encodeURIComponent( svgString ) ) ); // Convert SVG string to data URL
    var canvas = document.createElement("canvas");
    var context = canvas.getContext("2d");

    canvas.width = width;
    canvas.height = height;

    var image = new Image();
    image.onload = function() {
        context.clearRect ( 0, 0, width, height );
        context.drawImage(image, 0, 0, width, height);

        canvas.toBlob( function(blob) {
            var filesize = Math.round( blob.length/1024 ) + ' KB';
            if ( callback ) callback( blob, filesize );
        });

    };
    ///****************************
  document.getElementById('my_image').src=imgsrc;
    return image.src = imgsrc;

}

I have a code that converts a chart into svg. but I need the output format to be a PNG image. svgString2Image is the function that returns a codified base64 svg. How can I do it? thank you very much.

function svgString2Image( svgString, width, height, format, callback ) {
  //console.log("svgString",svgString)
    format ? format : 'png';

    var imgsrc = 'data:image/svg+xml;base64,'+ btoa( unescape( encodeURIComponent( svgString ) ) ); // Convert SVG string to data URL
    var canvas = document.createElement("canvas");
    var context = canvas.getContext("2d");

    canvas.width = width;
    canvas.height = height;

    var image = new Image();
    image.onload = function() {
        context.clearRect ( 0, 0, width, height );
        context.drawImage(image, 0, 0, width, height);

        canvas.toBlob( function(blob) {
            var filesize = Math.round( blob.length/1024 ) + ' KB';
            if ( callback ) callback( blob, filesize );
        });

    };
    ///****************************
  document.getElementById('my_image').src=imgsrc;
    return image.src = imgsrc;

}

http://plnkr.co/edit/lPhmuYywPCdjQrnwhQcH?p=preview

• javascript

• 1 Use the callback. – Bergi Commented Oct 18, 2017 at 16:04
• @meager How does linked Question and Answers address issue at code at current Question? – guest271314 Commented Oct 18, 2017 at 16:06
• format is never used but canvas.toBlob default is 'image/png'. If you want to specify the format add 'image/' + format as the 2nd parameter to canvas.toBlob. – Wilhelmina Lohan Commented Oct 18, 2017 at 16:37
• @WilliamLohan I'm not sure what you're saying, how can I fix it to generate a base64 string for a png – yavg Commented Oct 18, 2017 at 16:40
• Use toDataURL() if you want a base64 and not a file – Wilhelmina Lohan Commented Oct 18, 2017 at 16:42

2 Answers 2

As both @guest271314 and I stated in the ments use canvas.toDataURL when base64 string is desired not, canvas.toBlob. Also image.onload is async so it is impossible to "return" the base64 png string. You must use callback (or Promise as @guest271314 stated).

function svgString2Image(svgString, width, height, format, callback) {
    // set default for format parameter
    format = format ? format : 'png';
    // SVG data URL from SVG string
    var svgData = 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svgString)));
    // create canvas in memory(not in DOM)
    var canvas = document.createElement('canvas');
    // get canvas context for drawing on canvas
    var context = canvas.getContext('2d');
    // set canvas size
    canvas.width = width;
    canvas.height = height;
    // create image in memory(not in DOM)
    var image = new Image();
    // later when image loads run this
    image.onload = function () { // async (happens later)
        // clear canvas
        context.clearRect(0, 0, width, height);
        // draw image with SVG data to canvas
        context.drawImage(image, 0, 0, width, height);
        // snapshot canvas as png
        var pngData = canvas.toDataURL('image/' + format);
        // pass png data URL to callback
        callback(pngData);
    }; // end async
    // start loading SVG data into in memory image
    image.src = svgData;
}

// call svgString2Image function
svgString2Image(svgString, 800, 600, 'png', /* callback that gets png data URL passed to it */function (pngData) {
    // pngData is base64 png string
});

No function is passed to svgString2Image at last argument. Pass a function to svgString2Image which expects blob and filesize arguments.