javascript - 使用画布将图像切片成 div 元素？

Question

我加载图像，然后使用画布将其裁剪为单独的正方形。如何将裁剪的选择（在画布上绘制）分配给单独的 div 元素？我知道我可以创建多个画布并将它们插入多个 div 中，但这会损害性能。有什么方法可以将画布转换为图像对象或类似的东西？

Answer 1

您是否尝试过canvas.toDataURL()将画布的图像设置为background-images的图像<div>？

如果可行，您应该能够将画布的图像用作 CSS 精灵。

Answer 2

你甚至不需要画布。只需将图像用作div元素的背景，并使用背景位置来显示图像的不同部分。

例子：

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

CSS：

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; }