如何将用户绘制的网页中的SVG转换为PNG或JPG？

Question

I have a web page that has an iframe with an SVG which allows the user to draw on it. When they're done, I want to convert their drawing to an image. How would I do this?

(It needs to work in iOS Safari, Chrome, Firefox, Safari desktop, IE9+)

I'd prefer a client-side solution but could PHP solutions are ok.

Answer 1

I recently did this for a project I'm working on. There is different approaches, but this is what I went with.

Using jQuery and canvg (http://code.google.com/p/canvg/)

--

My JavaScript function

function getChartData(chartDiv) {

    var svg = $('#' + chartDiv).find('svg').parent().html();
    $('<canvas id="newCanvas_' + chartDiv + '" width="' + $('#' + chartDiv).width() + 'px" height="' + $('#' + chartDiv).height() + 'px" style="display: none; position: absolute; top: 0px; left: 0px; z-index: 0;"></canvas>').insertAfter('body');
    canvg(document.getElementById('newCanvas_' + chartDiv), svg);

    var imgData = document.getElementById('newCanvas_' + chartDiv).toDataURL("image/png");
    return imgData;
}

Then I had my svg element within a DIV.

<div id="mydrawing">
    <svg></svg>
</div>

Then I ran the function to get the base64 encoded string of the SVG as an image.

base64string = getChartData('mydrawing');

Then I could use that variable to display the image in my HTML, or pass it to my PHP to generate an image to save.

<img src="data:image/png;base64, base64string" />