- 使用JavaScript获取SVG的宽度和高度,然后使用以下代码将SVG转换为PNG:
const svg = document.querySelector('svg'); // 获取SVG元素
const width = svg.getAttribute('width');
const height = svg.getAttribute('height');
const canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext('2d');
const img = new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0);
const pngData = canvas.toDataURL('image/png');
console.log(pngData); // 返回PNG的base64数据
};
img.src = 'data:image/svg+xml;base64,' + btoa(new XMLSerializer().serializeToString(svg));
- 如果SVG没有设定宽度和高度,可以使用以下代码获取SVG的实际宽度和高度,并将其转换为PNG:
const svg = document.querySelector('svg'); // 获取SVG元素
const bbox = svg.getBBox();
const canvas = document.createElement('canvas');
canvas.width = bbox.width;
canvas.height = bbox.height;
const ctx = canvas.getContext('2d');
const img = new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0);
const pngData = canvas.toDataURL('image/png');
console.log(pngData); // 返回PNG的base64数据
};
img.src = 'data:image/svg+xml;base64,' + btoa(new XMLSerializer().serializeToString(svg));