exppng(){
let serializer = new XMLSerializer();
let svg = document.getElementById('svgID');
let toExport = svg.cloneNode(true); // 设置为 true,克隆节点及其属性,以及后代
let bb = svg.getBBox(); //
toExport.setAttribute('viewBox', bb.x + ' ' + bb.y + ' ' + bb.width + ' ' + bb.height); // 所有svg充满画布
toExport.setAttribute('width', bb.width);
toExport.setAttribute('height', bb.height);
let source = `<?xml version="1.0" standalone="no"?>\r\n` + serializer.serializeToString(toExport);
let image = new Image;
image.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(source);
let canvas= document.createElement('canvas');
canvas.width = bb.width + 40;
canvas.height = bb.height + 40;
let context = canvas.getContext('2d');
context.fillStyle = '#fff';
context.fillRect(0, 0, canvas.width, canvas.height);
image.onload = function() {
context.drawImage(image, 20, 20); // canvas画图片,image base64数据
let a = document.createElement('a');
a.download = 'tupian.png';
a.href = canvas.toDataURL('image/png');
a.click();
}
}
svg或者canvas转为png图片,并下载
于 2023-04-26 09:43:29 首次发布
该代码段展示了一个JavaScript函数exppng,用于将SVG元素转换为PNG图像。它首先克隆SVG节点,设置viewBox属性以填充画布,然后将SVG转换为XML字符串并创建一个Image对象加载这个字符串。当图片加载完成后,它在canvas上绘制图片并生成PNG数据URL,最后下载为PNG文件。
摘要由CSDN通过智能技术生成