如何将SVG国旗URL转换为PNG格式的Base64编码？

可以实现，核心是利用浏览器的Canvas API将SVG渲染为PNG后导出Base64。以下是具体修改步骤：

1. 新增SVG转PNG Base64的工具函数 #

替换你原有的getBase64FromUrl函数（或新增以下函数）：

function getSvgAsPngBase64(svgUrl, width = 40, height = 40) {
  return new Promise((resolve, reject) => {
    fetch(svgUrl)
      .then(res => res.text())
      .then(svgText => {
        // 将SVG文本编码为DataURL
        const svgDataUrl = `data:image/svg+xml;base64,${btoa(unescape(encodeURIComponent(svgText)))}`;
        
        const img = new Image();
        img.crossOrigin = "anonymous"; // 解决跨域绘制问题
        img.onload = () => {
          const canvas = document.createElement('canvas');
          canvas.width = width;
          canvas.height = height;
          const ctx = canvas.getContext('2d');
          ctx.drawImage(img, 0, 0, width, height); // 将SVG绘制到Canvas
          const pngBase64 = canvas.toDataURL('image/png'); // 导出PNG Base64
          resolve(pngBase64);
        };
        img.onerror = () => reject(new Error('加载SVG图片失败'));
        img.src = svgDataUrl;
      })
      .catch(err => reject(err));
  });
}

2. 修改getSelectedFlag函数 #

调用新的工具函数替代原有的getBase64FromUrl：

function getSelectedFlag(url){
  getSvgAsPngBase64(url).then(data=>{
    console.log(`flag:${data}`);
    app.contentWindow.postMessage(`flag:${data}`,'*');
  }).catch(err => {
    console.error('转换SVG到PNG失败:', err);
  });
}

关键说明 #

• 跨域处理：设置img.crossOrigin = "anonymous"确保外部CDN的SVG能正常绘制到Canvas，避免跨域报错
• 尺寸控制：函数参数中的width和height可以根据需求调整，对应你页面中国旗的显示尺寸
• 异常捕获：添加错误处理逻辑，避免转换失败导致代码阻塞

内容的提问来源于stack exchange，提问作者Sarfraz Rasheed