Question

我加载图像，然后使用画布将其裁剪为单个正方形。如何将裁剪的选区（在画布上绘制）分配到单个div元素中？我知道我可以创建多个画布并将它们插入多个div中，但这会影响性能。任何获取画布并将其转换为图像对象或类似物的方法？

Answer 1

您是否尝试使用canvas.toDataURL()将画布的图像设置为background-image的{{1}}？

如果有效，你应该能够将画布的图像用作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; }

使用canvas将图像切成div元素？

2 个答案: