1
在我的情況下,我使用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);
我似乎無法弄清楚哪一步不正確。
在此先感謝...
Highcharts的導出模塊能夠在PhantomJS的幫助下導出爲PNG/JPG格式。 http://www.highcharts.com/docs/export-module/export-module-overview – Bell
我查看了PhantomJS,我無法在生產服務器上安裝它。 – Harmster