Programmatically Clip/Cut image using Javascript

Question

Are there any documents/tutorials on how to clip or cut a large image so that the user only sees a small portion of this image? Let\'s say the source image is 10 frames of

Answer 1

In answer to :

Alas, JavaScript simply isn't capable of extracting the properties of the image you'd require to do something like this. However, there may be salvation in the form of the HTML element combined with a bit of server-side scripting. ...

< ? (open php) 
$large_image = 'path/to/large_image';
$full_w = imagesx($large_image);
$full_h = imagesy($large_image);
(close php) ? >

This can be done in Javascript, just google a bit :

var newimage = new Image();
newimage.src = document.getElementById('background').src;
var height = newimage.height;
var width  = newimage.width;

This generates a new image from an existing one and captures this way in java script the original height and width properties of the original image (not the one id'ed as background.

In answer to :

The width/height properties of the document's image object are read only. If you could change them, however, you would only squish the frames, not cut the frames up like you desire. The kind of image manipulation you want can not be done with client-side javascript. I suggest cutting the images up on the server, or overlay a div on the image to hide the parts you do not wish to display.

...

var newimage = new Image();
newimage.src = document.getElementById('background').src;
var height = newimage.height;
var width  = newimage.width;
newimage.style.height = '200px';
newimage.style.width = '200px';
newimage.height = '200px';
newimage.width = '200px';

and if wanted :

newimage.setAttribute('height','200px');

The doubled newimage.style.height and newimage.height is needed in certain circumstances in order to make sure that a IE will understand in time that the image is resized (you are going to render the thing immediately after, and the internal IE processing is too slow for that.)

Thanks for the above script I altered and implemented on http://morethanvoice.net/m1/reader13.php (right click menu... mouseover zoom lent) correct even in IE , but as you will notice the on mousemove image processing is too fast for the old styled IE, renders the position but only once the image. In any case any good idea is welcome.

Thanks to all for your attention, hope that the above codes can help someone...

Claudio Klemp http://morethanvoice.net/m1/reader13.php