Как загрузить содержимое холста в виде изображения / файла svg (расширение .svg) в angular 6 и выше

Question

У меня есть несколько графиков холста (использованных диаграмм. js для рисования графиков) в пользовательском интерфейсе, и я хочу загрузить график в виде svg изображения / файла в angular 6 и выше.

Я прошел многие сайты, почти заняли полдня, но не получили никакого решения для этого, и даже я попытался html2canvas, чтобы сохранить как файл SVG, но он не поддерживал. некоторые, где я слышал как d3. js, а некоторые другие библиотеки имеют возможность рисовать SVG, но я хочу сохранить как файл SVG и, пожалуйста, go через мой код ниже, любой ответ будет принят.

. html: ->

   <div>
      <canvas baseChart [data]="pieChartData" id="myCanvas" [labels]="pieChartLabels" [colors]="pieChartColors"
        [chartType]="pieChartType" [options]="pieChartOptions" [plugins]="pieChartPlugins"
        [legend]="pieChartLegend">
      </canvas>
    </div>
<div>
  <button (click)="svg_method()">DOWNLOAD</button>
</div>

.ts: ->

svg_method(){
      console.log("downloading functionality");
}

Answer 1

Таким образом, холст работает с растровой графикой и диаграммами. js использует именно это. Итак, вы получаете растровую графику из нее.

Canvas позволяет легко извлекать данные изображения как растровую графику, но не так просто, как векторная графика, так как для этого необходим механизм для работы с изображениями. пиксельное пространство, контуры трассировки и т. д. c и, в конечном итоге, создание разметки SVG.

Специально для вашего случая использования кто-то написал эту библиотеку: https://gliffy.github.io/canvas2svg/

Попробуйте .

Другой альтернативой может быть использование potrace. js или аналогичных библиотек, но я думаю, что это может быть кроличья нора для вашего варианта использования.

Answer 2

Можно попробовать

var theCanvas = document.getElementById("theCanvas");
var theImg    = theCanvas.toDataURL("image/svg");