Best way to display part of image defined by x+y coordinates?

Question

So, I have a load of database entries, each with an associated image file, and X and Y coordinates indicating which particular part of the image file it relates to. See the image and x1/y1/x2/y2 columns below

|  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 |

I have a Django page for each of the entries, and I'd like to display only the relevant bit of the image - e.g. for entry 5997, I'd like to display just part of 02.png: (38,216) to (717,436).

What's the best way to do this? Is there a smart way to do it using some kind of JavaScript library?

Or should I write a script to chop up the images myself first, then rename them, and display the smaller images?

An alternative would be to display the entire image, but put some kind of highlight or frame around the relevant bits - if this is possible using JQuery or something similar?

Basically I can do whatever seems like the most sensible technical solution. I suppose it would be nice to show people a smaller image first (to reduce page loading time), then have the option of seeing the larger image with a frame around it.

So:

1. is it possible to display just part of an image using JS: and
2. is it possible to highlight part of an image, also with JS?

EDIT:

the jQuery Image Annotation Plugin looks good for Q2, maybe?

Answer 1

Actually there's a fairly easy way to do this, don't think in terms of <img>, think instead of background or background-image (the CSS properties).

I can't say exactly what your code looks like without knowing your platform, but if say you had the properties available in the page, I can show you the jQuery, like this:

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

When you can just display the image in say a <div id="myImage"></div> like this:

$("#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, another side benefit of this is that the user (for your example) would load 02.png only once, but use it multiple times, from cache. For more info the term that describe this/commonly used is CSS sprites, there are lots of articles out there around this.

If it doesn't need to be dynamic, you can of course render all of these properties directly out in the style attribute of the <div> directly, I'm just not exactly sure where the work has to be done (client vs server) here.