javascript - 如何通过Javascript动态剪切图片

Question

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

1. 我想我需要通过坐标来获取小图标。有没有图书馆可以做到这一点？查询？道场？
2. 我怎样才能得到这张照片？我只知道我可以使用 a 或与 CSS 显示图片，但我认为我需要通过另一种方式获取这张图片。Javascript 库也可以完成这项工作吗？

Answer 1

实际使用非常简单。让我们ui_element为按钮上课。每个按钮都会有ui_element类和button_***类。
看一看：

.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*/

}

然后，理论上，下面的代码应该显示红色的“home”图标：

<div class="ui_element button_home"></div>

您还可以做一些花哨的技巧，例如悬停时的不同显示：

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

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

Answer 2

没有办法“动态地”执行此操作，这意味着它无法计算出坐标。要手动实现您在CSS中寻找的内容，您将使用

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

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