SVG график перевести в png

Question

У меня есть графики или графики на d3js выглядят примерно так

я создаю холст и перевожу svg график в png картинку таким образом

  drawImage(svg) {
  const image = new Image();
  const width = svg.clientWidth * 5;
  const height = svg.clientHeight * 5;

  const serializer = new XMLSerializer();
  const svgStr = serializer.serializeToString(svg);
  const imgStr = 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svgStr)));

  const canvas = document.createElement("canvas");
  const context = canvas.getContext("2d");

  canvas.setAttribute('width', width + '');
  canvas.setAttribute('height', height + '');
  canvas.style['backgroundColor'] = '#fff';


  image.onload = function () {
    context.drawImage(image, 0, 0, width, height);
    const canvasdata = canvas.toDataURL("image/png");
    return(canvasdata);
  };
  image.src = imgStr;

}

Далее при помощи pdfmake сохраняю картинку в pdf

openPdf(canvasdata){
const documentDefinition = {
    pageSize: 'A4',
    // by default we use portrait, you can change it to landscape if you wish
    pageOrientation: 'Portrait',
    // [left, top, right, bottom] or [horizontal, vertical] or just a number for equal margins
    pageMargins: [0, 60, 0, 60],
    content: {image: canvasdata, fit: [950, 250]}
  };
  pdfMake.createPdf(documentDefinition).open();
}

График переносится но у него все линии и значения на осях вместо бледносерого цвета становятся ярко черные может быть кто нибудь сталкивался с подобным очень хотелось бы перенести svg картинку в pdf без потери качества.

БЛОГ НА HUSL

SVG график перевести в png

Ответы (0 шт):