html5如何实现图片分割_html5图片切割成块教程【代码】

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，而是处理加载时机、异步导出顺序、设备兼容性限制这三处——漏掉任何一点，代码在本地跑通，上线就白屏或只出第一张。