Canvas drawImage 分割图片的实质是坐标裁剪，即通过指定源区域（sx,sy,sw,sh）和目标区域（dx,dy,dw,dh）实现内存中像素提取，而非生成独立文件；需配合toDataURL或toBlob导出，注意加载时机、闭包陷阱、尺寸限制及内存释放。
Canvas drawImage 分割图片的实质是坐标裁剪
HTML5 本身没有“图片分割”原生 API，所谓分割，本质是用 canvas 的 drawImage() 方法，通过指定源图像的裁剪区域（sx, sy, sw, sh）和目标画布的绘制区域（dx, dy, dw, dh），把原图某一块“抠出来”画到新 canvas 上。这不是生成独立文件，而是内存中的像素提取 —— 后续要导出为图片，得调用 toDataURL() 或 toBlob()。
用 drawImage 实现 2×2 网格切图的关键参数组合
假设原图宽高均为 400px，要切成 4 块等大的 200×200 图像，核心在于循环计算每次的源坐标和尺寸：
- 外层循环控制行（
y= 0, 200），内层循环控制列（x= 0, 200） - 每次调用
drawImage(img, x, y, 200, 200, 0, 0, 200, 200)：前四个参数从原图取，后四个参数画到空白 canvas 左上角 - 每切一块，立刻用
canvas.toDataURL('image/png')获取 base64 数据，或用canvas.toBlob()生成Blob
注意：img 必须已加载完成（监听 img.onload），否则 drawImage 会静默失败且不报错。
toBlob 导出多张图片时需避免闭包陷阱
循环中用 toBlob 保存文件，常见错误是所有回调里的 i 都指向循环结束后的值。正确做法是：
立即学习“前端免费学习笔记（深入）”；
- 用
let声明循环变量（ES6+ 环境下可直接解决） - 或把
canvas和索引封装进立即执行函数：(function(c, idx) { c.toBlob(...); })(canvas, i); - 导出文件名别硬编码，建议用
new Date().getTime() + '_' + idx + '.png'避免覆盖
另外，toBlob 是异步的，批量导出不保证顺序；如需严格序号，应串行触发或用 Promise.all 聚合。
移动端切大图可能触发 canvas 尺寸限制
部分 Android WebView 或旧版 Safari 对单个 canvas 的宽高乘积有限制（如 16777216 像素 ≈ 4096×4096）。一张 8000×6000 的图直接切块时，若临时 canvas 宽高设为原图尺寸，就可能被截断或渲染为空白。
- 对策：切块前先检查
img.naturalWidth * img.naturalHeight，超限则按比例缩小原图再切 - 不要依赖
img.width/height（可能是 CSS 缩放值），务必用naturalWidth/naturalHeight - 切完每块后记得调用
canvas.width = canvas.height = 0释放内存，尤其在循环中
真正难的不是写几行 drawImage，而是处理加载时机、异步导出顺序、设备兼容性限制这三处——漏掉任何一点，代码在本地跑通，上线就白屏或只出第一张。
