uni-app App端canvas.drawImage拼接多图失败主因是图片未预加载完成就绘制，须用Promise.all+uni.getImageInfo校验尺寸、统一缩放、累加偏移绘制，并确保ctx.draw回调中调用canvasToTempFilePath。
uni-app App端canvas.drawImage拼接多图失败？先确认平台限制
App端（iOS/Android）的 canvas 在 uni-app 中不是全功能 Web Canvas，尤其对多图连续 drawImage、跨域/本地路径混合绘制、异步资源加载顺序极其敏感。很多“本地能跑、真机白屏”或“只画出第一张”的问题，根源是图片没真正加载完成就调用了 drawImage。
- App端
uni.createCanvasContext返回的上下文不支持onload回调，必须用uni.getImageInfo预加载并校验尺寸 -
drawImage的 src 必须是本地临时路径（tempFilePath），不能直接传assets/或网络地址（即使已下载到本地） - iOS 真机对 canvas 宽高超过 4096px 会静默截断，拼长图前务必分段或压缩单图分辨率
如何安全地把多张本地图片按顺序垂直拼成长图
核心逻辑不是“一张张 draw”，而是「预加载 → 统一缩放 → 计算偏移 → 批量绘制 → 导出」。关键在控制时序和尺寸一致性。
- 用
Promise.all包裹所有uni.getImageInfo({ src: tempFilePath })，确保每张图的width/height可用 - 统一设置目标宽度（比如屏幕宽 * 2），按比例缩放每张图高度，避免因原始宽高差异导致错位
- 用累加的
y偏移值控制下一张图起始位置，别依赖ctx.measureText或其他不可靠计算 - canvas 宽度设为最大图宽，高度为所有缩放后高度之和，否则导出空白
const ctx = uni.createCanvasContext('myCanvas', this);
// 假设 images = [tempFilePath1, tempFilePath2...]
Promise.all(images.map(src => uni.getImageInfo({ src })))
.then(res => {
const maxWidth = Math.max(...res.map(i => i.width));
let totalHeight = 0;
res.forEach((img, i) => {
const scale = maxWidth / img.width;
const h = img.height * scale;
ctx.drawImage(images[i], 0, totalHeight, maxWidth, h);
totalHeight += h;
});
ctx.draw(false, () => { /* 导出 */ });
});
App端 canvas.toTempFilePath 失败的典型错误
常见报错 fail canvas is empty 或导出纯黑/纯白图，基本可锁定三类原因：
-
ctx.draw没传回调函数，或回调里没立刻调uni.canvasToTempFilePath—— App端必须等绘制真正结束 - canvas 元素未在 WXML 中声明宽高（哪怕用
style="width:1px;height:1px"也行），或被v-if控制导致渲染时机错乱 - 导出时指定的
canvasId和 WXML 中的canvas标签canvas-id不一致（注意大小写和连字符）
正确写法：ctx.draw(true, () => { uni.canvasToTempFilePath({ canvasId: 'myCanvas', success: ... }); });
为什么不用 web-view 或原生插件做长图拼接
web-view 加载外部 HTML + canvas 方案在 App端存在严重兼容问题：iOS 无法访问本地 tempFilePath，Android 可能因 WebView 内核版本缺失 toBlob；原生插件虽稳定但增加包体积、调试成本高、跨端维护难。纯 canvas 方案只要守住「预加载 → 同步绘制 → 回调导出」这个链路，就能覆盖 95% 的 App端需求。
最易被忽略的是：App端 canvas 绘制过程没有浏览器 DevTools 可调试，出问题只能靠 console.log 打点每张图的 width/height 和 totalHeight 累加值 —— 别跳过这一步。
