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

Question

我有一个网页，其中有一个带有 SVG 的 iframe，允许用户在其上绘图。当他们完成后，我想将他们的绘图转换为图像。我该怎么做？

(需要在 iOS Safari、Chrome、Firefox、Safari 桌面版、IE9+ 中运行)

我更喜欢客户端解决方案，但 PHP 解决方案也可以。

Answer 1

我最近为我正在从事的一个项目做了这个。 有不同的方法，但这就是我所采用的。

使用 jQuery 和 canvg ( http://code.google.com/p/canvg/ )

--

我的 JavaScript 函数

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;
}

然后我在 DIV 中添加了 svg 元素。

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

然后我运行该函数来获取 SVG 的 Base64 编码字符串作为图像。

base64string = getChartData('mydrawing');

然后我可以使用该变量在 HTML 中显示图像，或者将其传递给 PHP 来生成要保存的图像。

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