0

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

（它需要在 iOS Safari、Chrome、Firefox、Safari 桌面、IE9+ 中工作）

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

4

2 回答 2

2

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

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

svg然后我在一个 DIV 中有我的元素。

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

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

base64string = getChartData('mydrawing');

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

<img src="data:image/png;base64, base64string" />
于 2013-04-26T18:44:34.617 回答
0

服务器端解决方案是：

  1. 在服务器上安装imagemagick.so模块
  2. 将 SVG 解析为字符串并将其提交到服务器（建议使用 POST）
  3. 插入额外的 XML 标签（如果需要）
  4. 使用 PHP::imagemagick 将其转换为 PNG 或 JPG。
  5. 将图像返回给客户，包括header声明。

注意：服务器端编码更可靠，但缺点是图形处理占用大量 CPU 周期（即：很多用户可能会滞后于您的服务器）。

于 2013-05-01T03:46:49.197 回答