svg转换图片的base64

881 阅读1分钟

svg转换图片的base64

思路:

  1svg部分序列化
  2拼接svg+xml的base64s
  3把svg+xml的base64s放入图片容器中
  4把图片画进canvas5canvas转换成base64
    
// ↓ 第一部分
const svg = document.getElementById('mySvg'); 
//返回序列化的xml字符串s
const s = new XMLSerializer().serializeToString(svg); 
//获取svg的base64s
const src = `data:image/svg+xml;base64,${window.btoa(escape(encodeURIComponent(s)))}`;
// ↓ 创建图片容器并存放
const img = new Image(); 
// 创建图片容器承载过渡
img.src = src; 
// 注意:需要在图片onload方法中执行 
img.onload = () => { 
// ↓ 第二部分 
        const canvas = document.createElement('canvas');
        canvas.width = img.width; canvas.height = img.height; 
        const context = canvas.getContext('2d'); 
        context.drawImage(img, 0, 0);
        const ImgBase64 =canvas.toDataURL('image/png'); 
}