Javascript 使用画布将图像切片为div元素？

我加载一个图像，然后使用画布将其裁剪成各个方块。如何将裁剪的选择（绘制在画布上）分配到各个div元素中？我知道我可以创建多个画布并将它们插入多个div中，但这会影响性能。

---

有没有办法将画布转换成图像对象或类似的东西？

您是否尝试过使用

canvas.toDataURL（）

将画布的图像设置为

的

背景图像

如果可行，您应该能够将画布的图像用作CSS精灵。
您甚至不需要画布。只需将图像用作
div
元素的背景，并使用背景位置来显示图像的不同部分

例如：

<div id="nw"></div>
<div id="ne"></div>
<div id="sw"></div>
<div id="se"></div>

div {
  width: 100px;
  height: 100px;
  background-image: url(someimage.jpg);
  overflow: hidden;
}
#nw { background-position: 0 0; }
#ne { background-position: -100px 0; }
#sw { background-position: 0 -100px; }
#se { background-position: -100px -100px; }