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

时间:2012-02-29 04:33:50

标签: crop freeform

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

您可以移动红色选择。

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

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

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

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

3 个答案:

答案 0 :(得分:6)

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

查看演示here

希望它有所帮助。

编辑: 只是一点伪代码:

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

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

答案 1 :(得分:1)

我正在研究same subject。我现在的想法是使用imagecolorallocatealpha绘制相反的多边形并使它们透明。 然后使用imagefilledpolygon绘制多边形。对于客户端,我们将使用预定义的图像(因此在PHP中预定义的多边形)。我也遇到过这个问题:http://brittonkerin.com/image_region_selector/irs_demo.html。 希望这有所帮助。

答案 2 :(得分:0)

http://shedlimited.debrucellc.com/

使用html5绘制线条/坐标,

而不仅仅是使用clip()而不是使用stroke