js实现svg base64转png base64
时间: 2024-05-10 19:12:48 浏览: 204
js 图片转base64的方式(两种)
5星 · 资源好评率100%
要将SVG Base64转换为PNG Base64,可以使用以下步骤:
1. 创建一个空的Image对象。
2. 将SVG Base64字符串赋值给Image对象的src属性。
3. 等待Image对象的onload事件触发。
4. 在onload事件处理程序中,创建一个Canvas对象,并将Canvas的宽度和高度设置为与Image对象相同。
5. 将Image对象绘制到Canvas上。
6. 使用Canvas的toDataURL方法将PNG Base64字符串提取出来。
以下是一个JavaScript函数,它接受SVG Base64字符串作为输入,并返回PNG Base64字符串:
```
function svgToPngBase64(svgBase64) {
return new Promise((resolve, reject) => {
const img = new Image();
img.src = 'data:image/svg+xml;base64,' + svgBase64;
img.onload = function() {
const canvas = document.createElement('canvas');
canvas.width = this.width;
canvas.height = this.height;
const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
const pngBase64 = canvas.toDataURL('image/png').split(',');
resolve(pngBase64);
};
img.onerror = function(err) {
reject(err);
};
});
}
```
调用此函数时,将SVG Base64字符串作为参数传递给它。它返回一个Promise对象,当PNG Base64字符串准备好时,Promise将被解析,并返回PNG Base64字符串。如果出现错误,Promise将被拒绝,并返回错误对象。
阅读全文