Jquery 显示由x+；y坐标？

因此，我有一堆数据库条目，每个条目都有一个关联的图像文件，X和Y坐标指示图像文件的哪个特定部分与之相关。请参见下图和x1/y1/x2/y2列

|  idx | code   | ref        | imagesub | image      | x1   | y1   | x2   | y2   |
-------+--------+------------+----------+------------+------+------+------+------+
| 5997 | MDX    | 1,1        | 1        | 02.png     |  38  |  216 |  717 |  436 |
| 5998 | MDX    | 1,2        | 1        | 02.png     |  38  |  375 |  720 |  478 |
| 5999 | MDX    | 1,3        | 1        | 02.png     |  38  |  448 |  709 |  597 |

对于每个条目，我都有一个Django页面，我只想显示图像的相关部分-例如，对于条目5997，我只想显示02.png：（38216）到（717436）的一部分

最好的方法是什么？有没有一种聪明的方法可以使用某种JavaScript库来实现这一点

或者我应该先写一个脚本来切碎图像，然后重命名它们，然后显示较小的图像

另一种方法是显示整个图像，但在相关位周围放置某种突出显示或边框-如果可以使用JQuery或类似的方法

基本上，我可以做任何看起来最明智的技术解决方案。我想最好先给人们看一张较小的图像（以减少页面加载时间），然后可以选择在较大的图像周围加一个框架

因此：

是否可以使用JS:and仅显示图像的一部分

是否也可以使用JS高亮显示图像的一部分

编辑：

---

第二季度的图片看起来不错，也许？

不管怎样，最好还是在服务器端剪切图片。首先，它是减少加载时间的唯一方法，它避免了任何浏览器兼容性或禁用JavaScript的问题。此外，它相对容易，特别是如果您可以使用Imagemagick，并且如果您需要对图像进行任何大小调整，则质量将更好且一致

但是关于你的问题，是的，是的

事实上，您根本不需要JavaScript，CSS应该完成这项工作（尽管我猜几乎所有页面布局操作都是如此……）。关键是不要使用

元素，因为调整大小也会缩放和扭曲附着在其上的图像。如果希望图像可单击，请使用任何通用元素，即使是

：

a#图像{
显示：块；
背景图片：url（someimage.png）；
背景位置：100px 250px；
宽度：500px；
高度：700px；
}

非常简单的东西，应该不会有太多的浏览器兼容性问题（尽管不要引用我的话）

如果要突出显示图像的某个区域，可以在包含元素的图像中放置

元素，并将其设置为如下样式：

a#图像跨度{
位置：绝对位置；
顶部：30px；
左：50px；
宽度：10px；
高度：10px；
背景颜色：橙色；
不透明度：.7；
显示：块；
}
/*并确保包含的图像元素具有正确的“位置”*/
#图像{位置：相对；}

所有这些我都不知道，所以你可能需要做一些实验，但想法就在那里

---

如果您不需要调整图像大小或节省带宽，并且您希望用户经常查看全尺寸图像，那么使用JavaScript设置此类样式可能是有益的。尽管如此，在大多数情况下，服务器端图像处理仍然是一种可行的方法。

实际上，有一种相当简单的方法可以做到这一点，不要从

的角度来思考，而要从

背景

或

背景图像

（）的角度来思考

在不了解您的平台的情况下，我无法确切地说出您的代码是什么样子的，但是如果假设您在页面中有可用的属性，我可以向您展示jQuery，如下所示：

//for (38,216) to (717,436)
var img = { x1: 38, x2: 717, y1: 216, y2: 436, url: "02.png" };

$("#myDiv").css({
  width: img.x2 - img.x1,
  height: img.y2 - img.y1,
  background: "url('" + img.url + "')",
  backgroundPosition: -img.x1 + "px " + -img.y1 + "px"
});

当您可以仅以如下方式显示图像时：

//for (38,216) to (717,436)
var img = { x1: 38, x2: 717, y1: 216, y2: 436, url: "02.png" };

$("#myDiv").css({
  width: img.x2 - img.x1,
  height: img.y2 - img.y1,
  background: "url('" + img.url + "')",
  backgroundPosition: -img.x1 + "px " + -img.y1 + "px"
});

这样做的另一个好处是，用户（例如）只会从缓存中加载一次

02.png

，但会多次使用它。有关更多信息，描述此/常用的术语是，有

---

如果它不需要是动态的，您当然可以直接在

的

样式

属性中直接渲染所有这些属性，我只是不确定在哪里必须完成工作（客户端与服务器）。

最好的方法是通过调用（基本上与MooGoo所提倡的是同一件事）。当浏览器将更广泛地支持CSS解决方案时，使用javascript是没有意义的

---

在服务器上实际分割映像的唯一原因是，如果您的映像非常大，并且您希望显示的单个位很小，否则，您将实际看到服务同一映像的性能优势，因为它将在初始请求后缓存在客户端的浏览器中。

是的，我不认为ut服务器性能和缓存，考虑到这一点，CSS是最好的选择。在需要缩小图像（缩略图）的情况下，服务器可能应该完成这项工作，但即使这样，生成的图像也应该保存在某种缓存中。