Преобразование SVG в изображение/png с использованием JS/PHP

Question

В моем случае я использую Highcharts для рендеринга диаграмм. Эта библиотека дает графики в SVG. Я хочу сохранить изображение/png из этого SVG, сохраненной стороны сервера, поэтому я могу использовать его там. Сначала я использую парсер 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'); 
} 

Полученное изображение просто полный черный что-то.

Если я использую следующее для коррекции альфа, изображение полностью белое.

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

Я не могу понять, какой шаг неправильный.

Заранее спасибо ...

Answer 1

Я выбрал новую стратегию. Поскольку я хочу использовать изображения в PDF-документе, я могу использовать SVG. Поэтому я беру данные SVG с помощью метода Highcharts.getSVG() для каждого графика и отправляю его с помощью сообщения Ajax на мой обработчик на стороне сервера. Поскольку SVG является простым XML, его легко сохранить в файле, который я могу использовать позже.