jquery - 显示由 x+y 坐标定义的图像部分的最佳方式？

Question

因此，我有大量数据库条目，每个条目都有一个关联的图像文件，以及指示它与图像文件的哪个特定部分相关的 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 的一部分:(38,216) 到 (717,436)。

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

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

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

基本上我可以做任何看起来最明智的技术解决方案。我想最好先向人们展示较小的图像(以减少页面加载时间)，然后可以选择查看带有框架的较大图像。

所以:

1. 是否可以使用 JS 仅显示图像的一部分:和
2. 是否可以使用 JS 突出显示图像的一部分？

编辑:

jQuery Image Annotation Plugin第二季度看起来不错，也许？

Answer 1

实际上有一个相当简单的方法可以做到这一点，不要用<img>来思考。 ，思考而不是 background或background-image (the CSS properties)。

如果不知道您的平台，我无法准确说出您的代码是什么样子，但如果说您在页面中拥有可用的属性，我可以向您展示 jQuery，如下所示:

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

当你可以只显示图像时，比如 <div id="myImage"></div>像这样:

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

You can view a demonstration here ，这样做的另一个好处是用户(对于您的示例)将加载 02.png仅一次，但可以从缓存中多次使用它。有关详细信息，描述此/常用的术语是 CSS sprites ，有lots of articles out there around this .

如果不需要动态，您当然可以直接在style中渲染所有这些属性。 <div> 的属性直接，我只是不确定这里的工作必须在哪里完成(客户端与服务器)。