js svg转png

// 使用 HTML5 Canvas 和 SVG.js 将 SVG 转换为 PNG 的示例代码

// 1. 创建一个 SVG 元素
var svgElement = document.getElementById('mySvg');

// 2. 创建一个 canvas 元素
var canvas = document.createElement('canvas');
canvas.width = svgElement.clientWidth;
canvas.height = svgElement.clientHeight;

// 3. 使用 canvg 库将 SVG 转换为 Canvas 内容
canvg(canvas, new XMLSerializer().serializeToString(svgElement));

// 4. 从 Canvas 获取 PNG 图像数据 URL
var pngDataUrl = canvas.toDataURL('image/png');

// 5. 创建一个 img 元素并设置其 src 属性为 PNG 数据 URL
var img = document.createElement('img');
img.src = pngDataUrl;

// 6. 将 img 元素添加到页面中
document.body.appendChild(img);

// 解释说明：
// 1. 首先获取页面中的 SVG 元素。
// 2. 创建一个与 SVG 大小相同的 Canvas 元素。
// 3. 使用 canvg 库将 SVG 内容绘制到 Canvas 上。canvg 是一个第三方库，需要提前引入。
// 4. 使用 toDataURL 方法将 Canvas 内容转换为 PNG 格式的 Data URL。
// 5. 创建一个新的 img 元素，并将其 src 设置为生成的 PNG 数据 URL。
// 6. 最后将 img 元素添加到页面中以显示 PNG 图像。

// 注意：canvg 库可以通过 npm 安装或直接在 HTML 文件中通过 <script> 标签引入。