I'm using jcrop when users upload a photo for their avatar to resize it properly.. however I'd also like to turn the photos black & white.
Asked
Active
Viewed 1,914 times
5 Answers
4
You can turn it black and white on the client side, with canvas, but it would be pointless to push this pixel data to the server to be saved. I would use this only as a preview to the user.
If you wanted them to be permanently black and white, do it server side.

alex
- 479,566
- 201
- 878
- 984
-
3+1 for do it server side. no point in doing image manipulation on the client – Robert Koritnik Mar 04 '11 at 08:09
-
why not? it cuts down on the byte size when sending to a server. – Anurag Mar 04 '11 at 08:30
-
@Anurag You may expect a grayscale image, but the client could send anything. Validating it on the server-side would then be pointless when you could just generate it on the server-side. – alex Mar 04 '11 at 08:52
-
validating the image on the server side again may not be totally pointless, if most clients are high-latency or there are significant cuts in payload size, resulting in faster uploads and a better overall experience for the end user. – Anurag Mar 04 '11 at 09:08
-
You never want to destroy data. Keep the original file so the user can run additional effects if desired. – Bryan Downing Mar 04 '11 at 10:00
0
you can do it server-side. I believe jCrop comes with php as it's back-end, so maybe this link helps.

Community
- 1
- 1

Reigel Gallarde
- 64,198
- 21
- 121
- 139
0
An alternative idea: You can do this in flash (although requires flash)

Mark Redman
- 24,079
- 20
- 92
- 147
0
Webdesigner wall has a good tutorial on using jQuery and Canvas to apply a grayscale effect client-side.

Jon Hadley
- 5,196
- 8
- 41
- 65