title: Best way to display part of image defined by x+y coordinates?
body: <p>So, I have a load of database entries, each with an associated image file, and X and Y coordinates indicating which particular <strong>part</strong> of the image file it relates to. See the image and x1/y1/x2/y2 columns below</p>
  
  <pre><code>|  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 |
  </code></pre>
  
  <p>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).</p>
  
  <p>What's the best way to do this? Is there a smart way to do it using some kind of JavaScript library?</p>
  
  <p>Or should I write a script to chop up the images myself first, then rename them, and display the smaller images?</p>
  
  <p>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?</p>
  
  <p>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.</p>
  
  <p>So: </p>
  
  <ol>
  <li>is it possible to display just part of an image using JS: and </li>
  <li>is it possible to highlight part of an image, also with JS?</li>
  </ol>
  
  <p>EDIT: </p>
  
  <p>the <a href="http://www.flipbit.co.uk/jquery-image-annotation.html" rel="noreferrer">jQuery Image Annotation Plugin</a> looks good for Q2, maybe?</p>