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

在我的情况下，我使用Highcharts绘制图表。该库提供了SVG中的图表。我想从这个SVG保存图像/ png，保存在服务器端，所以我可以在那里使用它。首先，我使用canvg解析器（https://github.com/gabelerner/canvg）来获取SVG元素的内容。使用JS/PHP将SVG转换为图像/ png

就我而言，我在页面上有多个图表。这里的一个要求是抓住所有这些，保存服务器端并将它们用于单个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);

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

在此先感谢...

来源

2016-02-21 Harmster

Highcharts的导出模块能够在PhantomJS的帮助下导出为PNG/JPG格式。 http://www.highcharts.com/docs/export-module/export-module-overview – Bell

我查看了PhantomJS，我无法在生产服务器上安装它。 – Harmster

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

来源

2016-02-21 14:50:29 Harmster

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

回答

相关问题