Combined image rotation & cropping in jQuery

Question

We currently have a system for cropping images that uses jCrop on the front-end, and System.Drawing in .NET on the backend - this works very well, but now we need to introduce image rotation. Only 90 degree angles are needed, and jQuery.Rotate works fine in isolation, but I would like to combine these two jQuery plugins gracefully. Do you have any experience in this area? Are there "shake & bake" solutions?

Solution 1

I know this is an old question but, have you checked this jQuery plugin called CropIt?

The demo looks very good and you have zoom, crop and rotate in the same plugin, no backend code required.

Hope this helps.

Solution 2

I suggest rotating the image server side. You really can't combine jCrop with a rotated image, since a CSS-based method would 'lie' about the width and height.

It can be extremely fast. Your UI would simply add 'rotate=90' to the image querystring when the button was clicked, and the image would reload.

Here's a very simple example of using jCrop and querystring-based resizing.

Take a look at the demo page to see how responsive it is - adding the rotate command would only take a few lines of javascript. If you need it, I could upload a sample of how to combine them.

Comments

[Daniel Schierbeck]

I'm afraid this won't work. Both jCrop and jQuery-Rotate make substantial changes to the DOM; they need to integrate in some way. As a last resort I could split the rotation and cropping over several steps, but I'd rather keep them in together.

[Ahmed Khalaf]

for Dykam: and this is what we call pipe-lining :D, you can pipeline more than one operation for Daniel: you are right, but we still can find a solution... i liked this problem and will post another answer if i find one

[Ahmed Khalaf]

on IE Rotation is done with angle attribute, which means you can do rotation and then jCrop

[Ahmed Khalaf]

yes, and the filter is applied with css, so it's achievable to rotate then jCrop after applying the rotation

[Ates Goral]

I still don't think that will work. Firstly, the filter is only used on IE. What about FF? Also, if the crop plug-in is reading the image's dimensions, they won't change with the CSS filter; CSS only changes the presentation of the image. If you still think this is doable, I think the onus is on you to write a working demo :)