2012-02-29 66 views
2

在问我的问题之前,我有一个测试页面,让每个人都更好地理解我的问题。网址为http://iamthemoon.com/crop/如何仅使用HTML5 + Javascript或服务器端语言裁剪某个区域?

您可以移动红色的选择。

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

然后我看着PHP GD和ImageMagick的,但我无法找到一个解决方案,以及。

我看着Adobe在线Photoshop的,但他们缺少自由形式的套索工具或自由形式的选择工具为好。

有没有人看到类似的JavaScript/PHP /红宝石/或任何其他基于网络的技术? 或甚至可能吗?

回答

1

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

+0

链接无法正常工作。 .. – Sachin 2017-06-28 06:00:03

+0

@Sachin:五岁! – Jan 2017-06-28 08:04:32

5

只是为了回答这个问题,如果这是可能的。 我不得不面对同样的问题,并花了我一个(完整的)周末来解决它使用HTML5。

看一看演示here

希望它有帮助。

编辑: 只是有点伪代码:

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

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

+0

请在SO上重新发布您的答案,而不仅仅是一个链接。 – nhahtdh 2012-07-30 04:27:33

+0

nhahtdh,我不太熟悉,所以我很抱歉,如果我违反了我的职位的任何规则。对于其他人,我只是想发布一个链接到一个实际的实现作为一个灵感,我缺乏自己也当我努力发现,如果这是可能的HTML5。 – NetPlayer 2012-07-30 20:50:25

+0

常见问题解答可能会也可能不太清楚。但一个好的答案是回答这个问题,并且是独立的(因为未来链接可能会改变 - 没有人知道)。链接是好的,如果它增加了答案的价值,但只包含链接的答案可能变得毫无用处。您可以通过包含*相关*部分代码来修复您的帖子。 – nhahtdh 2012-07-31 02:16:16