svg转canvas

原生JS:

<template>
    <div>
      <button id="btn" style="margin:10px;">按钮</button>
     <svg width="100px" height="100px">
          <circle class="circle" cx="50" cy="50" r="40" stroke="black" stroke-width="2"/>
        </svg>
      <canvas id="myCanvas" width="100px" height="100px"></canvas>
    </div>
</template>
document.getElementById('btn').addEventListener('click',function(){
	//获取svg的html
	var svgHTML = new XMLSerializer().serializeToString(document.querySelector('svg'));
     
    var svg = new Blob([svgHTML], { type: "image/svg+xml;charset=utf-8," });
    var DOMURL = self.URL || self.webkitURL || self;
    var url = DOMURL.createObjectURL(svg);
   
     var img = new Image();
     img.src = url;
     img.onload = function () {
           var canvas = document.getElementById("myCanvas");
           var ctx = canvas.getContext("2d");
           ctx.drawImage(img, 0, 0, 100, 100);
      }
})

canvg：

1. 引入方式：npm i canvg，然后在需要的组件中import Canvg from 'canvg';

2. canvg(canvasId,svgHtml)：canvasId是页面中的canvas容器，svgHtml是svg的html。

rasterizehtml：

1. 引入方式：npm install rasterizehtml，然后在需要的组件中import rasterizeHTML from 'rasterizehtml';
2. 方法：
   rasterizeHTML.drawURL( url , canvas , options )根据URL生成canvas；
   rasterizeHTML.drawHTML( html , canvas , options])根据HTML代码生成canvas；
   rasterizeHTML.drawDocument( document , canvas, options)根据文档生成canvas；