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

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.

PHP code to go about extracting the width and height of the really large image:

From here, you'd then load the image into a element, an example of which is documented here. Now, my theory was that you may be able to extract pixel data from a element; assuming that you can, you would simply make sure to have some form of definite divider between the frames of the large image and then search for it within the canvas. Let's say you found the divider 110 pixels from the left of the image; you would then know that each "frame" was 110 pixels wide, and you've already got the full width stored in a PHP variable, so deciphering how much image you're working with would be a breeze.

The only speculative aspect to this method is whether or not JavaScript is capable of extracting color data from a specified location within an image loaded into a element; if this is possible, then what you're trying to accomplish is entirely feasible.