如何使用HTML5 + Javascript或服务器端语言仅裁剪某些区域？ [英] How to crop only certain area using HTML5 + Javascript or server side language?

问题描述

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

Before asking my question, I have a test page to make it everyone understand my question better. The URL is http://iamthemoon.com/crop/

您可以移动红色选择。

我只想裁剪红色选择区域。我认为可以在HTML5 canvas中轻松完成此操作，但这是我的错误。首先，我用Google搜索了2天，但找不到解决方案。有很多基于HTML5的裁剪工具，但是它们只有方形选择。

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.

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

I then looked into PHP GD and imagemagick, but I couldn't find a solution as well.

我看过Adobe Adob​​e Photoshop，但是他们也缺少自由套索工具或自由选择工具。

I looked at the adobe online photoshop, but they're missing free-form lasso tool or free-form selection tool as well.

有人看到过类似的javascript / php / ruby​​ /或任何其他基于Web的技术吗？
还是有可能？

did anyone see a similar javascript/php/ruby/ or any other web-based technology? or is this even possible?

推荐答案

只是为了回答这个问题是否可能。
我不得不处理相同的问题，花了我一个（完整的）周末来使用HTML5来解决。

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 .

看看演示此处。

希望它会有所帮助。

编辑：
只是一点伪代码：

Just a bit of pseudocode:

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

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.

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

这篇关于如何使用HTML5 + Javascript或服务器端语言仅裁剪某些区域？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！