浏览器端纯JavaScript批量转换SVG为Base64 PNG仅获取最后一个结果的问题求助

问题根源 #

你遇到的核心问题是异步事件的执行时机 + 共享变量覆盖。你在循环里复用了同一个Image实例，而img.onload是异步触发的：循环会在几毫秒内快速执行完，所有迭代都会把img.src设置为当前SVG的Blob URL，但最后一次迭代的URL会覆盖前面所有的。等浏览器真正开始加载图片时，只有最后一个URL有效，所以最终只触发一次onload，也就只生成了最后一个SVG的PNG。

修复方案1：为每个SVG创建独立的Image实例 #

把Image的创建移到循环内部，确保每个SVG对应一个独立的图片对象，这样就不会出现URL被覆盖的问题。修改后的代码如下：

<html> 
<head><title>Browser SVG to PNG Converter</title></head> 
<body bgcolor="#DDDDEE"> 
<h1>Browser SVG to PNG Converter</h1> 
<div id="div_svg"> 
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="150"> 
<rect width="100%" height="100%" style="stroke-width:0;fill:rgb(35,235,235);" /> 
<rect x="30" y="15" width="90" height="120" style="stroke:#000000;stroke-width:1;fill:none;" /> 
</svg> 
<svg xmlns="http://www.w3.org/2000/svg" width="130" height="150"> 
<rect width="100%" height="100%" style="stroke-width:0;fill:rgb(35,200,35);" /> 
<rect x="30" y="30" width="70" height="90" style="stroke:#000000;stroke-width:2;fill:none;" /> 
</svg> 
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="150"> 
<rect width="100%" height="100%" style="stroke-width:0;fill:rgb(35,235,235);" /> 
<rect x="30" y="15" width="90" height="120" style="stroke:#000000;stroke-width:3;fill:none;" /> 
</svg> 
</div> 
<br /> 
<button id="btn_convert">Convert SVG to PNG and display it below</button> 
<br /> 
<br /> 
<canvas id="aux_canvas" style="display:none;"></canvas> 
<textarea id="output_png" style="width:90vw;height:40vh;display:block;">base64 PNG source will be displayed here:</textarea> 
<script> 
document.getElementById('btn_convert').addEventListener('click', function() { 
  const svgAll = document.getElementById('div_svg').querySelectorAll('svg'); 
  const canvas = document.getElementById('aux_canvas'); 
  const win = window.URL || window.webkitURL || window; 

  // 清空输出框
  document.getElementById('output_png').value = "base64 PNG source will be displayed here:";

  for(let i = 0; i < svgAll.length; i++) { 
    const svg = svgAll[i]; 
    canvas.width = svg.getBoundingClientRect().width; 
    canvas.height = svg.getBoundingClientRect().height; 
    const data = new XMLSerializer().serializeToString(svg); 
    const blob = new Blob([data], { type: 'image/svg+xml' }); 
    const url = win.createObjectURL(blob); 

    // 每个循环创建独立的Image实例
    const img = new Image(); 
    img.addEventListener("load", function() { 
      canvas.getContext('2d').drawImage(img, 0, 0); 
      win.revokeObjectURL(url); 
      document.getElementById('output_png').value += "\n\n" + canvas.toDataURL("image/png"); 
    }); 

    document.getElementById('output_png').value += "\nGoing to load image..." 
    img.src = url; 
    document.getElementById('output_png').value += "\nEnded loading image..." 
  } 
}); 
</script> 
</body> 
</html>

进阶方案：封装成可复用的函数（符合你的最终目标） #

如果要实现一个接收SVG源数组、返回PNG Base64数组的函数，用Promise + async/await会更清晰，还能并行处理所有转换：

async function svgArrayToPngBase64(svgSources) {
  const win = window.URL || window.webkitURL || window;
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');

  // 为每个SVG创建转换Promise
  const convertPromises = svgSources.map(svgSource => {
    return new Promise((resolve, reject) => {
      const blob = new Blob([svgSource], { type: 'image/svg+xml' });
      const url = win.createObjectURL(blob);
      const img = new Image();

      img.onload = () => {
        try {
          // 解析SVG获取尺寸
          const svgDoc = new DOMParser().parseFromString(svgSource, 'image/svg+xml');
          const svgElement = svgDoc.querySelector('svg');
          const width = parseInt(svgElement.getAttribute('width'));
          const height = parseInt(svgElement.getAttribute('height'));
          
          canvas.width = width;
          canvas.height = height;
          ctx.drawImage(img, 0, 0);
          
          const base64 = canvas.toDataURL('image/png');
          win.revokeObjectURL(url);
          resolve(base64);
        } catch (err) {
          win.revokeObjectURL(url);
          reject(err);
        }
      };

      img.onerror = (err) => {
        win.revokeObjectURL(url);
        reject(err);
      };

      img.src = url;
    });
  });

  // 等待所有转换完成，返回Base64数组
  return Promise.all(convertPromises);
}

// 使用示例：
// const svgSources = [
//   '<svg xmlns="http://www.w3.org/2000/svg" width="150" height="150"><rect width="100%" height="100%" fill="red"/></svg>',
//   '<svg xmlns="http://www.w3.org/2000/svg" width="150" height="150"><circle cx="75" cy="75" r="50" fill="blue"/></svg>'
// ];
// svgArrayToPngBase64(svgSources).then(base64Array => {
//   console.log('所有PNG Base64:', base64Array);
// }).catch(err => {
//   console.error('转换失败:', err);
// });

关键修改点说明 #

1. 独立Image实例：每个SVG对应一个Image，避免共享实例导致的URL覆盖。
2. Promise封装：把异步的图片加载和画布绘制逻辑封装成Promise，方便批量处理和错误捕获。
3. 并行处理：用Promise.all同时处理所有SVG转换，效率更高。
4. 资源清理：每次转换完成后调用revokeObjectURL释放Blob URL资源，避免内存泄漏。

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