Convert SVG to an image/png using JS/PHP

Question

In my case I use Highcharts for rendering charts. This library gives the charts in SVG. I want to save an image/png from this SVG, saved server side, so I can use it there. First I use the canvg parser (https://github.com/gabelerner/canvg) to grab the content of the SVG element.

In my case I've got more than one chart on the page. A requirement hereby is to grab all of them, save server side and use them in a single PDF document.

The code (js) for this:

//  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); }
});

In the handler (php), I do this:

$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');
}

The resulting image is just a full black something.

If I use the following for alpha correcting, the image is completely white.

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

I can't seem to figure out which step is not correct.

Thanks in advance...

Answer 1

I've chosen a new strategy. Because I want to use the images in a PDF document, I can use the SVG. So I grab the SVG data with the Highcharts.getSVG() method for each chart and send that with an Ajax post to my server side handler. Since SVG is plain XML, itś easy to save that to a file, which I can use later on.