html2canvas移动端dataURL始终为空问题求助

问题说明 #

这段代码在桌面端所有浏览器运行正常，但切换到移动端（iPhone、Android、iPad等）时，会抛出错误 Supplied Data is not a valid base64-String jsPDF.convertStringToImageData。排查发现html2canvas生成的canvas为空，导致imgURL的值仅为data:,，但代码能正确定位到目标元素。

原代码：

const element = document.querySelector("#copycontent");
const canvas = await html2canvas(element, { logging: true });
const imgURL = canvas.toDataURL('image/png');
const pdf = new jsPDF();
pdf.addImage(imgURL, 'PNG', 0, 0, 170, 53.5);
pdf.save('information.pdf');

解决方案 #

1. 开启跨域图片支持 #

移动端浏览器对跨域资源的限制更严格，即使桌面端能正常渲染，移动端可能会阻止html2canvas捕获跨域图片。添加useCORS配置并确保图片服务器返回正确的跨域头：

const canvas = await html2canvas(element, { 
  logging: true,
  useCORS: true,
  allowTaint: false // 配合useCORS使用，避免canvas被污染
});

2. 确保目标元素尺寸明确 #

移动端页面中，动态渲染的元素或隐藏元素可能未正确计算尺寸，导致html2canvas捕获到空白。可以强制设置元素的宽高，并在配置中指定canvas尺寸：

const element = document.querySelector("#copycontent");
// 确保元素可见并设置明确尺寸
element.style.display = 'block';
const elemWidth = element.offsetWidth;
const elemHeight = element.offsetHeight;
element.style.width = `${elemWidth}px`;
element.style.height = `${elemHeight}px`;

const canvas = await html2canvas(element, { 
  logging: true,
  useCORS: true,
  width: elemWidth,
  height: elemHeight
});

3. 延迟捕获等待内容加载完成 #

移动端页面渲染速度较慢，尤其是包含图片或异步加载内容的场景。等待所有子元素加载完成后再执行捕获：

const element = document.querySelector("#copycontent");

// 等待元素内所有图片加载完成
await new Promise(resolve => {
  const imgs = element.querySelectorAll('img');
  let loaded = 0;
  if (imgs.length === 0) return resolve();
  
  imgs.forEach(img => {
    if (img.complete) {
      loaded++;
      if (loaded === imgs.length) resolve();
    } else {
      img.onload = img.onerror = () => {
        loaded++;
        if (loaded === imgs.length) resolve();
      };
    }
  });
});

const canvas = await html2canvas(element, { logging: true, useCORS: true });

4. 直接使用canvas对象生成PDF #

跳过toDataURL转换步骤，直接将canvas对象传入jsPDF，避免base64格式转换可能出现的问题：

const canvas = await html2canvas(element, { logging: true, useCORS: true });
const pdf = new jsPDF();
// 直接传入canvas而非dataURL
pdf.addImage(canvas, 'PNG', 0, 0, 170, 53.5);
pdf.save('information.pdf');

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