플래시를 사용하지 않고 타원형/다각형 모양을 사용하여면/머리 자르기? (ajax 또는 html5?)

Question

내 임무는 사용자가 자신의 사진을 업로드 한 다음 사이트에서 얼굴 + 머리카락을 자르고 전자 카드에 붙여 넣는 것입니다. 힘든 부분은 내가 플래시를 사용하도록 허용되지 않는다는 것입니다./

아약스 또는 js 얼굴 탐지 솔루션이 있다는 것을 알고 있지만 이상한 모양의 패턴을 자르는 방법은 무엇입니까? 내가 알고있는 Imagemagick/graphicsmagick은 직사각형 또는 사각형 모양의 오브젝트 만자를 수 있습니다 (잘못하면 수정하십시오). 메신저가 이상한 모양을 잘라내는 기능을 갖기 전까지는이 아이디어가 거의 파괴 될까요? 원이나 다각형을 자르려면 다른 방법이 있습니까?

사용자가 자르기를 위해 사진에 선을 그릴 수 있도록 설정 한 후 사이트에서 선을 벡터로 변환하고 선 주위의 색상을 채우면 색상이 im으로 투명하게 변환됩니다. ..하지만 그때 나는 이걸 어떻게 시작 해야할지 모르겠다. 아마 순간에 가능하지 않을 것이다 (?).

나는 아이디어의 부족 해요 :(

Answer 1

난 그냥 성공적으로 작물을 만들었습니다 :)은 안드로이드 나 아이폰/아이 패드에서 작동합니다 완벽하지 않지만.

기본적으로 좌표를 표시하는 js 플로팅 도구를 사용하여 모든 좌표를 어딘가에 저장합니다.

그런 다음 IM이 홀수 모양을 자르지는 않지만 스텐실을 결합하여 사진의 bg를 변환하는 데 '마스크'를 사용할 수는 있지만 (좌표를 사용하여 선을 그릴 때 나타납니다. bg를 # 000000 색으로 채 웁니다.) 원본 사진.

결과는 우리가 찾고있는 작물이어야합니다 :) 이제 다소 우울한 부분부터 추가했습니다. 이 모든 것은 imagemagick을 사용합니다.

이제 IM에서 '경로'를 사용 했으므로 곡률이 큰 선이 필요하지 않았습니다. 실제로는 부드러운 자르기가 제공되지 않습니다. 누군가는 '3 차 곡선'을 사용하도록 제안했지만 각 좌표에 대한 매개 변수가 필요하므로 추가 코딩이 필요할 수 있습니다. 이 명령은 우리의 스텐실이 만들어집니다

(숫자의 긴 세트를 우리의 좌표) :

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 combined.png -alpha set -virtual-pixel transparent -channel A -blur 0x0.7 -level 50,100% +channel -background none -flatten final.png 

입니다 :

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

마지막으로 우리는 가장자리를 깃털 지금 작동합니다. https://lh6.googleusercontent.com/_2lSoW37_zqo/TYCD65Vu4zI/AAAAAAAAEcc/vjlCPM54FTI/s800/theoryinpractice.jpg

그게 전부입니다.이 사람이 도움이되기를 바랍니다.