How to crop only certain area using HTML5 + Javascript or server side language?

好久不见. 提交于 2019-12-07 13:40:16

问题


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?


回答1:


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




回答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.




回答3:


http://shedlimited.debrucellc.com/

use html5 to draw the line/ coordinates,

than just use clip() instead of stroke



来源:https://stackoverflow.com/questions/9493623/how-to-crop-only-certain-area-using-html5-javascript-or-server-side-language

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!