How to make a picture cropper? Only plain-vanilla JS!
+1
A:
Put the picture in a wrapper div, set overflow:hidden, then use position:relative to position the picture. It's not a particularly good solution, but it should work.
Brendan Long
2009-11-22 09:04:09
What is that? JS instructions?
Hoperty
2009-11-22 09:55:31
This is CSS, with this, you won't have a cropped image, but a partially hidden one (the visible part will be the cropped image)
Fabien Ménager
2009-11-22 10:00:27
I'm not very good at javascript, which is why I only posted the CSS, but it's the general idea. You would set the overflow:hidden; and position:relative; parts in normal CSS, then use javascript to position the image (object.style.x = x_position; object.style.y = y_position;). If you try this code and test it, how y_position and x_position affect it should be obvious.I don't know a way to actually edit the image with javascript. It's probably easier to just pass the image to a php script and use gd functions.
Brendan Long
2009-11-22 10:18:27
+1
A:
This tool can make cropped images : http://www.pixastic.com/. It is Open source and downloadable, so you might get inspiration from it.
Fabien Ménager
2009-11-22 10:03:41
+2
A:
You want plain vanilla JS only, but still: There is a Prototype/Scriptaculous based cropper available:
http://www.defusion.org.uk/code/javascript-image-cropper-ui-using-prototype-scriptaculous/
Obviously however, the actual cropping of the image file is done using PHP. I don't think there is any way to do that in Javascript. No sane way, anyway. :)
Pekka
2009-11-22 10:07:21