使用画布将图像切片成 div 元素？答案

【问题标题】：slice an image using canvas into div elements?使用画布将图像切片成 div 元素？
【发布时间】：2012-08-04 09:35:29
【问题描述】：

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

【问题讨论】：

标签： javascript html animation css

【解决方案1】：

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

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

【讨论】：

【解决方案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; }

【讨论】：