如何用Javascript动态剪切图片

我有一张这样的图标图片，我知道这张图片可以帮助节省http链接的时间。然而，我不知道如何使用它

我想我需要通过坐标获得小图标。有没有图书馆可以这样做？JQuery？道场

我怎样才能拍到这张照片？我只知道我可以用或和CSS一起显示图片，但我想我需要用另一种方式来获得这张图片。Javascript库也可以完成这项工作吗

---

实际使用非常简单。让我们为按钮设置

ui\u元素

类。每个按钮都有

ui\u元素

类和

按钮

类。
看看：

.ui_element {
    background-image: url("http://i.stack.imgur.com/S02fG.png");
    width: 24 px;    /*May be different for specific buttons*/
    height: 24 px; 

}
.button_home {
    background-position: -23px -23px; /*Move the main image to the deserved element*/

}

然后，理论上，以下代码应显示红色的“主页”图标：

---

请注意，我的代码不会显示所有正确对齐的内容。除非在生成图像时使用了非常精确的模式，否则无法自动生成CSS代码。

没有“动态”生成CSS代码的方法，这意味着它无法计算出坐标。要手动实现您在CSS中寻找的内容，您可以使用

background:url('sprites.png') 0 0;

---

图像本身的格式，左多远和下多远。

精灵应与CSS

背景图像

和

背景位置

属性一起使用。这是我在Google上找到的第一个教程。除非你在画布或webgl上下文中使用图像，否则你应该使用css属性。我的回答对你没有帮助吗？我花了一些时间才写下来……：(

div.button_home {
    background-position: 0px -23px; /*grey icon*/
}
div.button_home:hover {
    background-position: -23px -23px; /*red icon*/
}

background:url('sprites.png') 0 0;