HTML5图片分割教程：块切割代码实现

本文深入解析了HTML5中利用Canvas的drawImage方法实现图片分割的核心原理与实战要点，揭示所谓“分割”实为基于坐标系统的内存级像素裁剪而非文件生成，并系统讲解了2×2网格切图的参数计算逻辑；同时重点预警了开发者极易忽略的关键陷阱——图片加载时机未监听导致静默失败、闭包中循环变量引用错误引发导出错乱、移动端canvas尺寸限制引发渲染异常，以及内存未及时释放带来的性能隐患，辅以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，而是处理加载时机、异步导出顺序、设备兼容性限制这三处——漏掉任何一点，代码在本地跑通，上线就白屏或只出第一张。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《HTML5图片分割教程：块切割代码实现》文章吧，也可关注golang学习网公众号了解相关技术文章。