如何使用HTML5 + Javascript或服务器端语言仅裁剪某些区域?

Moo*_*oon 3 crop freeform

在提出我的问题之前,我有一个测试页面,让每个人都更好地理解我的问题.网址是http://iamthemoon.com/crop/

您可以移动红色选择.

我喜欢只裁剪红色选区.我认为它可以在HTML5画布中轻松完成,但这是我的错误.首先我用Google搜索了2天,但我找不到解决方案.有许多基于HTML5的裁剪工具,但它们只有方形选择.

然后我研究了PHP GD和imagemagick,但我也找不到解决方案.

我看了adobe在线photoshop,但他们也缺少自由形式的套索工具或自由形式的选择工具.

有没有人看到类似的javascript/php/ruby​​ /或任何其他基于Web的技术?或者这甚至可能吗?

Net*_*yer 6

只是为了回答这个问题是否可行.我不得不处理同样的问题并带我(完整)周末使用HTML5来解决它.

看看这里的演示.

希望能帮助到你.

编辑:只是一点伪代码:

1.在画布上绘制图片.2.记录鼠标在画布上的点击.3.使用鼠标单击坐标绘制图案4.使用原始图像填充图案.5.用图案替换原始图像.

编辑:源代码发布https://github.com/netplayer/crop