3

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?

Moon
  • 22,195
  • 68
  • 188
  • 269

3 Answers3

7

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

NetPlayer
  • 94
  • 1
  • 6
  • Please repost your answer on SO rather than just a link. – nhahtdh Jul 30 '12 at 04:27
  • nhahtdh,I am not familiar with SO , i am sorry if i violated any of its rules with my post. To the rest, i just wanted to post a link to an actual implementation as an inspiration i lacked myself also when i was struggling to find out if this is possible with HTML5. – NetPlayer Jul 30 '12 at 20:50
  • The FAQs may or may not be too clear about this. But a good answer is one that answers the question, and self-contained (as the link is likely to change in the future - no one knows). Linking is good, if it adds value to the answer, but answer containing only link may become useless. You can fix your post by including *relevant* part of your code. – nhahtdh Jul 31 '12 at 02:16
  • When you go to the link, it asks for €55 payment to get the script, so this answer is not suitable for Stack Overflow. – Anis Abboud Oct 15 '13 at 09:08
  • Can you add a functionality to your project to reset all canvas and points without page refereshes? – Mah Jan 12 '21 at 02:30
  • Yes that's just as easy as : ctx= canvas.getContext('2d'); ctx.clearRect(0, 0, canvas.width, canvas.height); – NetPlayer Jan 18 '21 at 13:02
1

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.

Community
  • 1
  • 1
Jan
  • 42,290
  • 8
  • 54
  • 79
0

http://shedlimited.debrucellc.com/

use html5 to draw the line/ coordinates,

than just use clip() instead of stroke

IanO.S.
  • 1,362
  • 1
  • 10
  • 20