Rotation, grayscale, upload and save

[crowned]

Hi Alex,

Great repository. Thank you for your work on this. Today, I started working on a web page that will allow a user to do the following things:

1. Upload an image
2. Rotate image
3. zoom / pan / crop to a preset size, say, 640 x 480
4. Save the result as a grayscale png.

Your cropbox has the zoom / pan / crop ability I'm looking for—do have any pro-tips for what I might use for the other parts?

[acornejo]

Hi Nick,

Most of what you are describing can be done in jquery-cropbox, this is
the way I would implement it:

• When the user selects the image, immediately convert to grayscale and
  then feed to jquery-cropbox.
• Add a custom-control to the cropbox to provide two rotate buttons
  (rotate left, and rotate right).
• Add callbacks to these buttons that rotate the image by 90 degrees
  left or right, and then update the cropbox to reflect the changes in
  dimensions (each time you rotate width and height of the rotated image
  flip).

For making the image grayscale and rotating the image, you will have to
use the canvas element available in javascript (this is available in all
major modern browsers, but as you might expect its not available in
older IE versions, which are in general horrible to support). If you do
a google search you will find plenty of examples to use canvas to
convert to grayscale or to do 90 degree rotations. You could also
support arbitrary rotations, but that will require a much more
sophisitcated UI and not just two buttons.

The nice thing, is that at least in modern browsers all of the above can
be done entirely at the client. Which means your server will receive an
already grayscale/rotated/cropped image and the client will be able to
do all the manipulation on real-time observing the results without
having to transmit intermediate steps to the server.

PS: When I get some spare time I plan to add some examples to the documentation on how to use custom controls. Its fairly simple, just provide either a jquery object containing the dom elements of your control, or a string containing the html describing your controls to the cropbox. I'll close this issue for now. Feel free to comment here if you have any other questions.

[crowned]

Thanks so much for the response. When you say canvas, are you suggesting a file-selection like this, then selecting the canvas and writing it out as a PNG so that it can be jquery-cropbox'ed?

http://jsfiddle.net/influenztial/qy7h5/

[acornejo]

Yup, but I don't know what you mean by "writing it out as png". You don't need to write anything, just point the src of the image to the generated dataURL and cropbox can take it from there.

(perhaps this is what you meant, the png bit is what threw me off, since although the dataURL might be in png format, it doesn't need to be, since that is a browser dependent implementation detail).

EDIT: In more detail, you can use canvas.toDataURL() to get the URL for the generated canvas image. You should do the grayscale transformation before you generated the dataURL.

[crowned]

Ah, okay. Awesome. Thanks for taking me through that.