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或类似的东西？

基本上我可以做任何看似最明智的技术解决方案。我想首先向人们展示一个较小的图像（减少页面加载时间）会很好，然后可以选择看到周围有框架的较大图像。

所以：

是否可以使用JS：和
是否可以使用JS？

编辑：

jQuery Image Annotation Plugin对Q2来说看起来不错，可能吗？

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的{{1}}属性中直接渲染所有这些属性，我只是不确定它在哪里必须在这里完成工作（客户端与服务器）。

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设置此类样式可能会有所帮助。不过，在大多数情况下，服务器端图像处理是最佳选择。

Answer 3

最好的方法是通过名为CSS sprites的技术绝对CSS （基本上与MooGoo所倡导的相同）。当CSS解决方案得到浏览器的广泛支持时，采用javascript是没有意义的。

在服务器上实际拆分图像的唯一原因是，如果您的图像非常大并且您想要显示的各个位很小 - 否则，您实际上会看到提供相同图像的性能优势，因为它会在初始请求后缓存在客户端的浏览器中。

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

3 个答案: