在我的例子中,我使用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);
我似乎无法弄清楚哪个步骤不正确。
提前感谢...
我选择了一个新的策略。因为我想在 PDF 文档中使用图像,所以我可以使用 SVG。因此,我使用Highcharts.getSVG()方法获取每个图表的SVG数据,并将其与Ajax帖子一起发送到我的服务器端处理程序。由于SVG是纯XML,因此很容易将其保存到文件中,以便稍后使用。