将base64编码的svg转换为png

Question

I am in need of converting a base64 encoded svg to a png and then returning it to the client to be rendered.

The idea is that I am drawing an svg on the client using d3.js and I need to convert it to png.

I tried taking the javascript root and writing the svg on the canvas and then converting it toDataUrl but IE has problems with this on all versions so this is not a viable option.

I have searched online a bit and all I could find is Inkscape.

This is not a viable solution for me because of limited access on the server and frankly I don't think it's a good idea to install an entire application for a simple functionality.

Is there any other solution that can take a base 64 encoded svg and return a png that can be displayed in an image?

Answer 1

I am facing the same issue, however I been able to render the SVG into an image so your users could right click to download the image or right click on the canvas. There is also Canvg which has a library that appears to work with IE, however it is not accurate for complex SVG and so does not meet my needs. Perhaps it will help you.

I have code in my question that will work in IE, just use the IMG or Canvas object, you do not need to call toDataURI.

Checkout Canvg , it might be of help.

Good luck! If you find a better solution, please let me know. :-)

Answer 2

I found that since I have to support IE 11 I instead went with canvas to blob to PNG using "canvas-toBlob.js" and "FileSaver.js"

$("#save-btn").click(function() 
{
    $("#myChart").get(0).toBlob(function(blob) 
    {
        saveAs(blob, "chart_1.png");
    });
});

https://jsfiddle.net/mfvmoy64/155