使用javascript将svg导出为base64保存为png

作者:admin 发布日期:2024年5月14日 20:29 浏览量:19

代码:

function svgToBase64Png(svgString) {  
    // 创建一个新的Image对象
    const img = new Image();  
  
    // 当图片加载完成后,将其绘制到canvas上
    img.onload = function() {  
        // 创建一个canvas元素
        const canvas = document.createElement('canvas');  
        canvas.width = img.width;  
        canvas.height = img.height;  
  
        // 将图片绘制到canvas上
        const ctx = canvas.getContext('2d');  
        ctx.drawImage(img, 0, 0, img.width, img.height);  
  
        // 将canvas内容转换为Base64编码的PNG
        const base64 = canvas.toDataURL('image/png');  
  
        // 在这里,你可以使用base64变量,例如将其发送到服务器或将其设置为某个元素的src属性
        console.log(base64);  
  
        // 清理(可选)
        canvas.width = canvas.height = 0;  
        URL.revokeObjectURL(img.src); // 如果使用createObjectURL,则需要调用revokeObjectURL
    };  
  
    // 将SVG字符串转换为data URL并设置给Image对象
    // 注意:这里我们假设SVG是XML有效的,并且可以直接用作data URL
    img.src = 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svgString)));  
  
    // 注意:这里使用了btoa和encodeURIComponent/unescape来将SVG字符串转换为Base64编码的data URL
    // 但请注意,unescape在某些浏览器中可能不可用或被弃用,你可能需要使用其他方法来处理特殊字符
}

可在控制台输入,使用方法:

// 示例SVG字符串(需要是有效的SVG XML)
const svgString = '<svg width="100" height="100"><circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /></svg>';  
svgToBase64Png(svgString);