Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

jquery

image

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?

like image 756
AP257 Avatar asked Jun 29 '10 02:06

AP257


People also ask

How do you put coordinates into an image in HTML?

The coords attribute specifies the coordinates of an area in an image map. The coords attribute is used together with the shape attribute to specify the size, shape, and placement of an area. Tip: The coordinates of the top-left corner of an area are 0,0.


1 Answers

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.

like image 65
Nick Craver Avatar answered Nov 14 '22 22:11

Nick Craver