使用 JS/PHP 将 SVG 转换为图像/png答案

【问题标题】：Convert SVG to an image/png using JS/PHP使用 JS/PHP 将 SVG 转换为图像/png
【发布时间】：2016-06-02 20:40:17
【问题描述】：

在我的例子中，我使用 Highcharts 来渲染图表。这个库提供了 SVG 中的图表。我想从这个 SVG 保存一个图像/png，保存在服务器端，所以我可以在那里使用它。首先，我使用 canvg 解析器 (https://github.com/gabelerner/canvg) 来获取 SVG 元素的内容。

就我而言，我的页面上不止一张图表。特此的要求是获取所有这些，保存服务器端并在单个 PDF 文档中使用它们。

代码（js）：

//  get the svg data from the chart holder
var svg = document.getElementById(DOMId).children[0].innerHTML;

//  create a target canvas element
var target = document.getElementById('target1');

//  bind svg data to the target canvas element
canvg(target, svg);

//  convert svg data to an image/png;base64 format
var img = target.toDataURL('image/png');
img = img.replace('data:image/png;base64,', '');

//  post data to application so the file can be saved
var bindata = "bindata=" + img;
$.ajax({
    type: 'POST',
    url: 'path-to-handler',
    data: bindata,
    success: function(data) { chartExported(data); }
});

在处理程序（php）中，我这样做：

$image = imagecreatefromstring(base64_decode(
    str_replace(' ', '+', $request->getPostParameter('bindata')
)));

if ($image !== false) {
    imagepng($image, $filename);
    imagedestroy($image);
    return $this->renderText('success');
}
else {
    return $this->renderText('error');
}

生成的图像只是一个全黑的东西。

如果我使用以下 alpha 校正，图像是完全白色的。

imagealphablending($image, false);
imagesavealpha($image, true);

我似乎无法弄清楚哪个步骤不正确。

提前谢谢...

【问题讨论】：

Highcharts 的导出模块可以在 PhantomJS 的帮助下导出为 PNG/JPG。 highcharts.com/docs/export-module/export-module-overview
我查看了 PhantomJS，但无法在生产服务器上安装它。

标签： php svg highcharts gd canvg

【解决方案1】：

我选择了一个新策略。因为我想使用 PDF 文档中的图像，所以我可以使用 SVG。因此，我使用 Highcharts.getSVG() 方法为每个图表获取 SVG 数据，并将其与 Ajax 帖子一起发送到我的服务器端处理程序。由于 SVG 是纯 XML，因此很容易将其保存到文件中，以便我以后使用。

【讨论】：