uni-app如何应对小程序端Canvas绘制超大图片报错问题

iOS真机Canvas高度超4096px会静默失败致“canvas is empty”，非代码错误而是平台硬限制；需分段绘制（每段≤3800px）并确保draw回调中调用canvasToTempFilePath。

canvas绘制超大图在iOS真机报“canvas is empty”或直接空白

根本原因是iOS微信小程序对Canvas单次渲染高度有硬限制：超过4096px就会静默失败，不报错、不回调、画布内容为空。这不是代码写错了，是平台能力边界——哪怕你用painter插件、echarts或手写canvas，只要最终生成的画布高度 > 4096px，iOS真机就必然失效。

实操建议：

• 先用uni.getImageInfo拿到原图宽高，预估绘制后画布尺寸（尤其注意文字行高、留白叠加后的总高度）
• 若预估高度 ≥ 4000px，必须分段绘制：把内容拆成多个<canvas>，每段控制在3800px以内，再用canvas.toTempFilePath逐段导出，最后用服务端拼接或前端drawImage合成
• 不要依赖“缩放画布”来绕过限制——scale(0.5)后仍按原始像素计算高度，照样触发4096上限
• 安卓和开发者工具无此限制，务必真机测试，别信模拟器

canvasToTempFilePath报“fail canvas is empty”但draw已调用

常见于异步资源未就绪就执行导出，比如图片onload没等完、字体loadFont还在加载、或者Vue响应式数据变更还没渲染到DOM。微信小程序里ctx.draw()只是提交绘制指令，不保证立刻完成。

实操建议：

• 所有图片必须走uni.getImageInfo → ctx.drawImage流程，不能直接用img.src赋值后就draw
• ctx.draw(false, callback)里的callback才是绘制真正结束的信号，canvasToTempFilePath必须放在这里面，而不是draw调用后立刻执行
• 涉及文字渲染时，用ctx.setFontSize后加await new Promise(r => setTimeout(r, 16))防字体未加载完成（iOS尤其敏感）
• H5端不支持canvasToTempFilePath，必须用conditionCompile隔离逻辑，否则编译会通过但运行时报错

canvas绘制网络图时H5端报“tainted canvases may not be exported”

这是浏览器CORS策略导致的污染问题：H5端用drawImage加载跨域图片后，toDataURL会被拒绝；而小程序和App端因沙箱机制不同，反而能正常导出。现象是开发时没问题，上线H5就崩溃。

实操建议：

• 所有网络图片URL必须带crossOrigin="anonymous"属性，且服务端需返回Access-Control-Allow-Origin: *（不能带credentials）
• 若无法改服务端配置，改用fetch + createObjectURL中转：fetch(imgUrl).then(res => res.blob()).then(blob => URL.createObjectURL(blob))，再把URL喂给new Image()
• 避免在drawImage后立即调toDataURL，加setTimeout(() => {}, 0)让事件循环跑完，否则部分浏览器会判定为“未完全污染清除”
• 微信内置浏览器（iOS Safari内核）对此最严格，必须实机验证

canvasId传参正确却报“should pass canvasId or canvas”

这个错误不是参数写错了，而是<canvas>组件还没挂载到页面DOM树里，uni.createCanvasContext拿不到有效上下文。常见于条件渲染（v-if）、路由懒加载、或onReady没等完就初始化canvas。

实操建议：

• <canvas>标签必须有id和canvas-id两个属性，且值一致，例如id="shareCanvas" + canvas-id="shareCanvas"
• 初始化context前，用uni.createSelectorQuery().in(this).select('#shareCanvas').fields({ node: true })查节点是否存在，exec回调里再创建context
• Vue3组合式API中，不要在setup里直接uni.createCanvasContext，应放在onMounted或nextTick之后
• 真机调试时，console.log输出ctx对象，若为null或undefined，说明DOM未就绪，不是API调用问题

关键点在于：iOS Canvas高度限制是硬伤，没法绕过；H5跨域污染是浏览器行为，服务端配合才能根治；而“canvas is empty”和“should pass canvasId”本质都是时机问题——不是API不会用，是没等到它真正准备好。