使用椭圆形/多边形形状裁剪脸部/头部而不使用闪光灯? (ajax 还是 html5?)

发布于 2024-10-21 19:07:57 字数 354 浏览 3 评论 0原文

我的任务是让用户上传自己的照片,然后网站裁剪脸部+头发并将其粘贴到电子贺卡上。困难的部分是我不允许使用 flash =/

我知道有 ajax 或 js 面部检测解决方案,但令我困惑的是如何裁剪奇怪形状的图案。据我所知,Imagemagick/graphicsmagick 只能裁剪矩形或正方形物体(如果我错了,请纠正我)。在我具有裁剪奇怪形状的功能之前,这会很大程度上破坏整个想法吗?或者还有其他方法来裁剪圆形或多边形吗?

突然出现一个想法,也许允许用户在照片中画一些线条进行裁剪,然后网站可能会将线条转换为矢量并在线条周围填充颜色,然后颜色由 im 转换为透明...但是然后我不知道如何开始这个……目前可能不可能(?)。

我的想法已经用完了:(

My mission is to let users upload their own photos then the site crops the face+hair and pastes them on an ecard. The tough part is that I'm not allowed to use flash =/

I understand there are ajax or js face detection solutions out there, but what stumps me is how do I crop an odd shaped pattern. Imagemagick/graphicsmagick as I know can only crop a rectangular or square shaped object (please correct me if I'm wrong). Will this pretty much destroy the whole idea until im has the functionality to crop odd shapes? or are there other ways to crop circles or polygons?

An idea popped up to maybe allow the user to draw some lines in their photo for cropping then maybe the site converts the lines to a vector and fills a color around the lines, the colors are then converted by im to transparent... but then I have no idea how to start this one.. probably not possible at the moment (?).

I'm running out of ideas :(

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

慵挽 2024-10-28 19:07:57

我刚刚成功创建了一个裁剪:)虽然不完美,但它应该可以在 android 或 iphone/ipad 上工作。

基本上我使用js绘图工具来标记坐标,将所有这些坐标保存在某处。

然后使用 imagemagick 的坐标,看起来虽然 IM 并没有真正裁剪奇怪的形状,但它可以使用“蒙版”通过组合模板来转换照片的背景(我们使用坐标绘制线条,填充背景) #000000 颜色)和原始照片。

结果应该是我们正在寻找的作物:)现在我们添加了一些羽化,因为它有点前卫。所有这一切都使用 imagemagick。

现在我们需要的是曲线,因为我在 IM 中使用了“路径”,但它并不能真正提供平滑的裁剪。有人建议使用“三次曲线”,但可能需要额外的编码,因为它需要每个坐标的一些参数。

该命令将创建我们的模板(长组数字是我们的坐标):

convert -size 450x125 xc:black -fill white -stroke black -draw "path 'M +60+9 +94+18 +96+19 +84+27 +92+36 +97+43 +103+56 +102+58 +109+66 +109+74 +101+68 +98+76 +98+84 +95+88 +98+91 +106+95 +110+99 +111+103 +99+106 +89+108 +73+112 +56+109 +40+109 +26+103 +37+97 +46+91 +48+88 +39+80 +36+71 +32+78 +27+72 +30+61 +35+55 +42+41 +30+37 +40+24 +51+14 +156+9 +197+6 +236+8 +269+16 +265+36 +248+50 +222+52 +213+35 +198+24 +174+18 +155+13 +60+9'" stencil.gif

然后我们将模板与原始图像组合(这应该带出我们的透明“裁剪”):

convert original.jpg stencil.gif -alpha off -compose CopyOpacity -composite combined.png

最后我们羽化边缘:

convert combined.png -alpha set -virtual-pixel transparent -channel A -blur 0x0.7 -level 50,100% +channel -background none -flatten final.png

这就是它的方式现已运行:https://lh6.googleusercontent.com/_2lSoW37_zqo/ TYCD65Vu4zI/AAAAAAAEcc/vjlCPM54FTI/s800/theoryinpractice.jpg 

就是这样,我希望这对某人有帮助。

I have just successfully created a crop :) although not perfect it should work in android or iphone/ipad.

Basically I used a js plotting tool to mark the coordinates, save all those coordinates somewhere.

Then use the coordinates for imagemagick, it appears that although IM doesn't really crop odd shapes it can however use 'mask' to convert the bg of the photo by combining the stencil (where we draw the lines using our coordinates, fill the bg with #000000 color) and the original photo.

The result should be the crop we are looking for :) now we added in some feathering since it's kinda edgy. All this using imagemagick.

Now all we needed are curvier lines since I used 'path' in IM which doesn't really offer a smooth crop. Someone suggested to use 'cubic curves' but may require additional coding since it needs some parameters for each coordinate.

This command will create our stencil (the long set of numbers are our coordinates):

convert -size 450x125 xc:black -fill white -stroke black -draw "path 'M +60+9 +94+18 +96+19 +84+27 +92+36 +97+43 +103+56 +102+58 +109+66 +109+74 +101+68 +98+76 +98+84 +95+88 +98+91 +106+95 +110+99 +111+103 +99+106 +89+108 +73+112 +56+109 +40+109 +26+103 +37+97 +46+91 +48+88 +39+80 +36+71 +32+78 +27+72 +30+61 +35+55 +42+41 +30+37 +40+24 +51+14 +156+9 +197+6 +236+8 +269+16 +265+36 +248+50 +222+52 +213+35 +198+24 +174+18 +155+13 +60+9'" stencil.gif

We will then combine the stencil with the original image (which should bring out our transparent 'crop'):

convert original.jpg stencil.gif -alpha off -compose CopyOpacity -composite combined.png

Finally we feather out the edges:

convert combined.png -alpha set -virtual-pixel transparent -channel A -blur 0x0.7 -level 50,100% +channel -background none -flatten final.png

This is how it works now : https://lh6.googleusercontent.com/_2lSoW37_zqo/TYCD65Vu4zI/AAAAAAAAEcc/vjlCPM54FTI/s800/theoryinpractice.jpg 

That's about it, I hope this helps someone.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文