Конвертируйте SVG в изображение / png, используя JS / Stack Overflow

В моем случае я использую 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);

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

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

2

Решение

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

1

Другие решения

Других решений пока нет …