Canvas drawImage 是 HTML5 中唯一能像素级拼接多图的原生方法，需预设画布尺寸、等待所有图片 onload 加载完成、处理跨域、手动计算坐标，并注意导出格式限制。
Canvas drawImage 拼接多张图片最直接
HTML5 本身没有“图片拼接”原生 API，真正能控制像素级位置、缩放、裁剪并合成的，只有 canvas 的 drawImage。用 img 标签加 CSS 排列只是视觉并置，不是真正合成一张图；而 drawImage 能把多张图片按坐标逐帧画到同一个画布上，最终导出为单张 Blob 或 data URL。
关键点：
-
drawImage有 3 种参数签名，拼接时常用的是drawImage(image, dx, dy)（贴左上角）和drawImage(image, dx, dy, dWidth, dHeight)（指定目标尺寸） - 所有图片必须已加载完成（监听
img.onload），否则drawImage会静默失败 - 画布尺寸需预先设为拼接后总宽高（
canvas.width/canvas.height），不能靠 CSS 缩放画布，否则导出模糊 - 若某张图跨域（如 CDN 图片），需设置
img.crossOrigin = 'anonymous'，否则调用toDataURL()会报SecurityError
用 Promise.all 等待多图加载完成再绘制
多张图片异步加载，顺序不确定。直接循环 drawImage 极易因某张图未就绪导致空白或错位。必须等全部加载完毕再统一绘制。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 每张
img创建后立即绑定onload，用Promise包裹，Promise.all([p1, p2, p3])确保全部 resolve 后才开始绘图 - 避免用
setTimeout或轮询判断img.complete，不可靠且难维护 - 加载失败时（
onerror）应 reject，让Promise.all中断流程，便于定位哪张图挂了
示例片段：
const imgs = urls.map(url => {
return new Promise((resolve, reject) => {
const img = new Image();
img.crossOrigin = 'anonymous';
img.onload = () => resolve(img);
img.onerror = () => reject(new Error(`Load failed: ${url}`));
img.src = url;
});
});
Promise.all(imgs).then(images => {
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// 开始 drawImage...
});横向/纵向拼接需手动计算坐标和画布尺寸
没有“自动排版”逻辑，拼接方向和间距全靠代码算。比如 3 张等宽图横向拼，画布宽度就是 img.width * 3 + gap * 2；第一张从 x=0 开始，第二张 x=img.width + gap，以此类推。
常见陷阱：
- 忘记考虑图片原始尺寸差异——
img.naturalWidth才是真实像素宽，img.width是 CSS 渲染宽，可能被拉伸 - 用
getBoundingClientRect()取尺寸？错，那是渲染后带缩放的值，canvas 绘制只认自然像素 - 间隙（gap）设为负数可实现重叠拼接，但要注意 z-order：后
drawImage的图层在上
导出拼接结果时注意 MIME 类型与兼容性
拼完后调用 canvas.toDataURL('image/png') 或 canvas.toBlob() 获取结果。这里有几个硬性限制：
-
toDataURL('image/jpeg')对透明区域会填充黑色，PNG 才保留 alpha；若需 JPEG 且要白底，得先用fillRect(0,0,w,h)填白底再绘图 - Safari 旧版本不支持
toBlob，需用toDataURL+dataURLtoBlob回退 - 超大画布（如宽高 > 16384px）在部分移动端会失败，Chrome 有内存限制，需分块拼接或压缩输入图
导出后想触发下载？用 URL.createObjectURL(blob) 配合 即可，别忘了 URL.revokeObjectURL 清理内存。
拼接逻辑本身不复杂，但跨域、加载时序、尺寸精度、导出格式这四点，任一疏忽都会让结果黑屏、错位或无法下载。动手前先确认图片来源是否允许跨域读取，比写十行 drawImage 都重要。
