显示由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的图像标注插件看起来不错的Q2,也许？

Answer 1

实际上有一个相当简单的方法来做到这一点,不要考虑<img>,而不是考虑background或background-image(CSS属性).

我不知道你的代码在不知道你的平台的情况下究竟是什么样子,但如果说你在页面中有了属性,我可以向你展示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"
});

您可以在此处查看演示,另一个好处是用户(对于您的示例)02.png仅加载一次,但是从缓存中多次使用它.有关更多信息,描述此/常用的术语是CSS精灵,围绕此有很多文章.

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

Answer 2

无论如何，最好还是切断图像服务器端。首先，这是减少加载时间的唯一方法，并且它可以避免任何类型的浏览器兼容性或禁用 JavaScript 问题。而且，这相对容易，特别是如果您可以使用 Imagemagick，并且如果您需要对图像进行任何大小调整，质量会更好且一致。

但至于你的问题，是的，是的。

事实上，你根本不需要 JavaScript，CSS 应该可以完成这项工作（尽管我猜几乎所有页面布局操作都是如此......）。关键是不要使用该<img>元素，因为调整大小也会缩放和扭曲附加到其上的图像。使用任何通用元素，即使<a>您希望图像可点击：

a#image {
  display: block;
  background-image: url(someimage.png);
  background-position: 100px 250px;
  width: 500px;
  height: 700px;
}

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

如果您想要突出显示图像的某个区域，您可以<span>在包含元素的图像中放置一个元素，并将其样式设置为：

a#image span {
  position: absolute;
  top: 30px;
  left: 50px;
  width: 10px;
  height: 10px;
  background-color: orange;
  opacity: .7;
  display: block;
}

/* And make sure the containing image element has the right 'position' */
a#image { position: relative; }

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

如果您不需要调整图像大小或节省带宽，并且您希望用户经常查看完整尺寸的图像，那么使用 JavaScript 设置此类样式可能会有所帮助。尽管如此，在大多数情况下，服务器端图像处理才是正确的选择。