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

Question

So, I have a download of database records, each of which has an associated image file, and the X and Y coordinates indicate which part of the image file to which it belongs. See Images and Columns x1 / y1 / x2 / y2 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 would like to display only the corresponding bit of the image - for example, for input 5997, I would like to display only part 02.png: (38,216) - (717,436).

What is the best way to do this? Is there any way to do this using some kind of JavaScript library?

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

An alternative would be to display the entire image, but put some kind of candlestick or frame around the corresponding bits - if this is possible using jQuery or something like that?

Basically, I can do everything that seems like the most reasonable technical solution. I suppose it would be nice to show people a smaller image first (to reduce page loading time), and then be able to see a larger image with a frame around it.

So:

• Is it possible to display only part of the image using JS: and
• Is it possible to highlight part of the image, also using JS?

EDIT:

jQuery Image Annotation Plugin looks good for Q2, maybe?

Answer 1

It is probably best to cut the image server side independently. For some, this is the only way to reduce load time, and it bypassed any browser compatibility or disabled JavaScript problems. In addition, it is relatively easy, especially if you can use Imagemagick, and if you need to resize the image, the quality will be better and consistent.

But as for your questions, yes and yes.

You really don't need JavaScript at all, CSS should do the job (although I assume this would be true for almost all page layouts). The key is not to use the <img> element, but to resize, which also scales and distorts the image attached to it. Use any common element, even <a> , if you want the image to be clickable:

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

Pretty simple stuff, shouldn't have a big problem with browser compatibility (although don't quote me on that).

If you want the image area to be selected, you can place the <span> element inside the image containing the element and style that he likes:

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

All this from the head, so you may have to experiment, but there is an idea.

If you don’t need to resize the image or save bandwidth, and you expect users to often see a full-sized image, setting these styles using JavaScript can be useful. However, in most cases, server-side image processing is the way to go.

Answer 2

There is actually a fairly simple way to do this, don’t think in terms of <img> , think instead of background or background-image ( CSS properties ).

I can’t say exactly what your code looks like without knowing your platform, but if you said that you have properties available on the page, I can show you jQuery, for example:

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

If you can just display the image, for example <div id="myImage"></div> , for example:

 $("#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 see the demo here , another advantage of this is that the user (for your example) downloaded 02.png only once, but use it several times from the cache. For more details, the term describing this / commonly used CSS sprites , there are many articles there .

If he does not need to be dynamic, you can, of course, display all these properties directly in the style <div> attribute directly, I'm just not quite sure where the work should work (client versus server).

Answer 3

The best way to do this is definitely CSS using the CSS sprites method (basically the same thing MooGoo does). It makes no sense to resort to javascript when the CSS solution will be much more widely supported by browsers.

The only reasons for actually splitting the image on the server would be if your image was extremely large and the individual bits that you wanted to display were small - otherwise you would actually see a performance advantage from serving the same image, since it will cache in the client browser after the initial request.