Javascript image crop possible without canvas?

Question

There are lots of scripts and plugins on the web for Javascript image crop/resize. Some using the HTML5 canvas to crop a certain area and storing the image back to the client via DataUrl. But without canvas I tested the jrac jquery plugin, but it only provides the cropping coordinates (x, y, width, height) in the end. There is never called an actual cropping function on the image.

How do I actually use these cropping coordinates on the Javascript image object? Can I only use CSS to show the image like being cropped or can I actually crop data out of that image into a new image in Javascript?

It seems to me that all Image crop plugins only provide a handy UI to get crop coordinates but the actual crop/resize must be done server-side with the image being sent to a php script, is that correct?

My question is the same as this one, that has not been answered yet.

Answer 1

Everything is possible in javascript (well almost everything)

To crop an image you need to side step the DOM and built in image handling API's and decode the image yourself. A lot of extra work involved but there is some help out there. A quick search on github found decoders/encoders for both jpg and png formats Image decoders (I am sure there are plenty more about) so with a little work you should be able to modify them to do some cropping.