从Data URL绘制图片到HTML Canvas失败及JsZip打包空文件问题

问题1：drawImage无法绘制图片到Canvas #

为什么必须用onload #

不管Canvas是否向用户展示，图片加载都是异步操作。浏览器需要从URL.createObjectURL生成的地址读取文件内容、解码图片数据，这个过程需要时间。如果跳过onload直接调用drawImage，此时图片还未加载完成，绘制操作自然无效。而fillRect是Canvas原生绘制逻辑，不依赖外部资源，所以能正常执行。

问题排查与修复 #

你的代码逻辑本身没问题，但大概率是后续打包操作没等图片加载完成就执行了。可以用Promise封装图片加载，确保所有绘制完成后再处理打包：

// 把图片加载封装为Promise，统一处理异步逻辑
function loadImage(url) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = () => resolve(img);
    img.onerror = reject;
    img.src = url;
  });
}

// 异步加载并绘制所有图片
async function renderImages(acceptedFiles, ctx, column, row, imageWidth, imageHeight) {
  for (const file of acceptedFiles) {
    const url = URL.createObjectURL(file);
    const img = await loadImage(url);
    ctx.drawImage(img, column, row, imageWidth, imageHeight);
    URL.revokeObjectURL(url); // 及时释放资源，避免内存泄漏
  }
}

调用这个异步函数后，再执行JsZip打包操作，就能保证Canvas已经完成绘制。

问题2：JsZip打包得到空Zip文件 #

问题原因 #

canvas.toDataURL()返回的是带前缀的Base64编码字符串（格式如data:image/png;base64,iVBORw0KGgo...），直接传给zip.file()时，JsZip无法正确解析这个格式，导致生成的文件内容为空。

修复方案 #

需要把Data URL转换为JsZip支持的格式，以下两种方法都可以：

方法1：转换为Uint8Array

// 把Data URL转成Uint8Array
function dataURLToUint8Array(dataUrl) {
  const base64Str = dataUrl.split(',')[1];
  const binaryStr = atob(base64Str);
  const uint8Arr = new Uint8Array(binaryStr.length);
  for (let i = 0; i < binaryStr.length; i++) {
    uint8Arr[i] = binaryStr.charCodeAt(i);
  }
  return uint8Arr;
}

// 打包时使用转换后的数据
const filename = `Page ${i + 1}.png`;
const dataUrl = canvas.toDataURL();
zip.file(filename, dataURLToUint8Array(dataUrl), { base64: false });

方法2：直接获取Canvas的Blob（更简洁）

// 直接从Canvas生成Blob，避免Base64转换
canvas.toBlob(async (blob) => {
  const filename = `Page ${i + 1}.png`;
  zip.file(filename, blob);
  
  // 生成并下载Zip文件
  const zipBlob = await zip.generateAsync({ type: 'blob' });
  const downloadLink = document.createElement('a');
  downloadLink.href = URL.createObjectURL(zipBlob);
  downloadLink.download = 'processed_images.zip';
  downloadLink.click();
  URL.revokeObjectURL(zipBlob);
}, 'image/png');

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