How do I crop only a specific area using HTML5 + Javascript or server-side language?
Before asking my question, I have a test page so that everyone understands my question better. URL http://iamthemoon.com/crop/
You can move the red color.
I like to crop only the red selection. I thought it could be done easily in HTML5 canvas, but that was my mistake. I thought it over for 2 days at first, but I couldn't find a solution. There are many HTML5 based cropping tools out there, but they only have a square selection.
Then I looked through PHP GD and imagemagick but couldn't find a solution.
I have looked through Adobe's online photoshop but they also don't get the free Lao shape tool or the free shape selection tool.
Has anyone seen similar javascript / php / ruby / or any other web technologies? or is it even possible?
source to share
just answer the question if possible. I had to deal with the same problem and took a (full) weekend to solve this with HTML5.
Take a look at the demo here .
Hope it helps.
EDIT: Just a little pseudocode:
1. Place the picture on the canvas. 2. Record the mouse clicks on the canvas. 3. Draw the pattern using the coordinates of the mouse clicks. 4. Fill in the template with the original image. 5. Replace the original image with a template.
EDIT: Source code released https://github.com/netplayer/crop
source to share
I am working on the same subject . My idea now was to draw the opposite polygon and make them transparent using imagecolorallocatealpha. Then the polygon is drawn using the imagefilledpolygon. For the client side, we will use predefined images (thus predefined polygons in php). I ran into this too: http://brittonkerin.com/image_region_selector/irs_demo.html . Hope it helps.
source to share
http://shedlimited.debrucellc.com/
use html5 to draw line / coordinates,
than just using clip () instead of dash
source to share