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

回答

相關問題