How to crop only certain area using HTML5 + Javasc

Question

Before asking my question, I have a test page to make it everyone understand my question better. The URL is http://iamthemoon.com/crop/

You can move the red selection.

I like to crop only the area of red selection. I thought it could be done easily in HTML5 canvas, but that was my mistake. First I googled about it 2 days, but I couldn't find a solution. There are many HTML5 based cropping tools, but they only have square selection.

I then looked into PHP GD and imagemagick, but I couldn't find a solution as well.

I looked at the adobe online photoshop, but they're missing free-form lasso tool or free-form selection tool as well.

did anyone see a similar javascript/php/ruby/ or any other web-based technology? or is this even possible?

Answer 1

http://shedlimited.debrucellc.com/

use html5 to draw the line/ coordinates,

than just use clip() instead of stroke

Answer 2

I'm working on the same subject. My idea now was to draw the opposite polygon(s) and make these transparent using imagecolorallocatealpha. The polygon is then drawn with imagefilledpolygon. For the client side we will be using predefined images (thus predefined polygons in php). I have come across this as well: http://brittonkerin.com/image_region_selector/irs_demo.html. Hope this helps somewhat.

Answer 3

just to answer to the question if this is possible. I had to deal with same problem and took me a (full) weekend to solve it using HTML5 .

Have a look at a demo here.

Hope it helps.

EDIT: Just a bit of pseudocode:

1.Draw the picture on canvas. 2.Record mouse clicks on canvas. 3.Draw a pattern using the mouse clicks coordinates 4.Fill pattern with original image. 5. Replace original image with pattern.

EDIT: Source code released https://github.com/netplayer/crop