1

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

4

2 回答 2

2

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

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

于 2012-08-04T01:33:43.700 回答
1

你甚至不需要画布。只需将图像用作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; }
于 2012-08-04T01:35:29.437 回答