How can I crop an image using only Javascript?

Question

Is there anyway I can crop an image using raw javascript? I want to be able to have a function that takes an image (html tag or source or whatever) with a certain width, height, offsetX and offsetY and it create a image of the portion specified.

I am not that familiar with HTML5 canvas and the like but I need to support older browsers, so that's not even an option (it sucks I know).

I hope this is clear. Thanks.

Answer 1

If all you need is to display a portion of the image, use css clip: https://developer.mozilla.org/en/CSS/clip . Works in IE6+ even with JavaScript disabled.

If you need to physically crop the image, and need IE6 support, then your options are Flash or sending the data plus cropping values to a server which returns the cropped image.

Answer 2

Often, it's enough to set the limits for rendering by using CSS styles to make the image appear cropped.

Instead of an img, use a div. Assign the desired size to the div. Set the property background to -x -y url('...url-of-your-image...') no-repeat

Replace x and y with the top/left offset that you want to display.