iPad端导出图表为PDF时img.onload()函数失效问题求助

你碰到的这个问题很典型——桌面端正常但iPad上图片加载回调失效，大概率确实和图片/Canvas的尺寸限制有关。移动端浏览器对图片渲染的内存资源限制比桌面端严格得多，过大的尺寸很可能导致图片加载失败或者回调根本不执行。下面给你几个具体的调整方案：

1. 限制Canvas的最大尺寸 #

你当前的Canvas尺寸是直接基于屏幕宽度，但iPad的屏幕宽度计算逻辑和桌面不同，而且即使屏幕宽度够，移动端浏览器的内存承载能力也有限。建议给Canvas设置一个固定的最大宽高上限，避免超出移动端的处理阈值：

// 替换原有的Canvas尺寸设置逻辑
const maxCanvasWidth = 1200; // 可根据图表实际需求调整，比如1000-1400px区间
const maxCanvasHeight = 800;
// 取屏幕宽度计算值和最大值的较小值
canvas.width = Math.min($window.screen.width - 150, maxCanvasWidth);
// 可以根据SVG的原始宽高比例自动计算Canvas高度，避免拉伸变形
const svg = document.getElementById('svg');
const originalRatio = (svg.getAttribute('height') || svg.clientHeight) / (svg.getAttribute('width') || svg.clientWidth);
canvas.height = canvas.width * originalRatio;

2. 调整SVG的输出尺寸 #

如果你的SVG本身尺寸过大，转换成Data URL后在iPad上加载容易出问题。可以在生成SVG字符串前，手动修改它的尺寸属性，让SVG适配Canvas的大小：

function generateSVGWithStyling(svgId) {
  const svg = document.getElementById(svgId);
  // 获取SVG原始宽高和比例
  const originalWidth = svg.getAttribute('width') || svg.clientWidth;
  const originalHeight = svg.getAttribute('height') || svg.clientHeight;
  const ratio = originalHeight / originalWidth;
  
  // 匹配Canvas的目标尺寸
  const targetWidth = canvas.width;
  const targetHeight = targetWidth * ratio;
  
  // 修改SVG属性，确保尺寸适配且不丢失原始比例
  svg.setAttribute('width', targetWidth);
  svg.setAttribute('height', targetHeight);
  svg.setAttribute('viewBox', `0 0 ${originalWidth} ${originalHeight}`);
  
  // 导出处理后的SVG字符串
  return new XMLSerializer().serializeToString(svg);
}

3. 优化图片加载的容错逻辑 #

有时候iPad上图片加载会有延迟，或者需要处理潜在的加载失败情况，避免回调丢失。可以添加onerror回调排查问题，同时确保图片编码和跨域设置正确：

var img = new Image();
// 解决SVG引用外部资源可能导致的跨域问题
img.crossOrigin = 'anonymous';
img.src = 'data:image/svg+xml; charset=utf8, ' + encodeURIComponent(svgURL);

img.onload = function () {
  console.log("图片加载成功，开始绘制Canvas");
  // 绘制时强制适配Canvas尺寸，避免图片超出范围
  ctxt.drawImage(this, 0, 0, canvas.width, canvas.height);
  vm.cnvasImg = canvas.toDataURL();
  subExportData(vm.cnvasImg, exportType);
};

img.onerror = function (error) {
  console.error("图片加载失败：", error);
  alert("导出失败，请检查图表尺寸是否过大");
};

4. 快速验证问题根源 #

你可以先在iPad上把img.src打印出来，复制这个Data URL到浏览器地址栏，看看SVG是否能正常显示。如果SVG本身显示异常，那问题出在SVG生成环节，而不是图片加载回调。

这些调整的核心就是把图片/Canvas的尺寸控制在移动端浏览器的处理范围内，应该能解决iPad上img.onload()不触发的问题。

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