2011-03-15 1 views
1

Ma mission est de permettre aux utilisateurs de télécharger leurs propres photos puis le site recadre le visage + les cheveux et les colle sur une carte virtuelle. La partie difficile est que je ne suis pas autorisé à utiliser flash =/Recadrez-vous un visage/une tête en utilisant des formes ovales/polygonales sans utiliser le flash? (ajax ou html5?)

Je comprends qu'il existe des solutions de détection de visage ajax ou js là-bas, mais ce qui me dérange, c'est comment puis-je recadrer un motif de forme étrange. Imagemagick/graphicsmagick, comme je le sais, ne peut recadrer qu'un objet de forme rectangulaire ou carrée (veuillez me corriger si je me trompe). Est-ce que cela détruira l'idée jusqu'à ce que je dispose de la fonctionnalité pour recadrer des formes étranges? ou existe-t-il d'autres façons de recadrer des cercles ou des polygones?

Une idée est apparue pour permettre à l'utilisateur de tracer quelques lignes sur sa photo pour le rogner, alors peut-être que le site convertit les lignes en un vecteur et remplit une couleur autour des lignes. .. mais alors je n'ai aucune idée de comment commencer celui-ci .. probablement pas possible en ce moment (?).

Je suis à court d'idées :(

+0

Je ne suis pas sûr des détails, mais je vais rester à l'écoute de cette question. Je suis curieux de voir ce que les autres proposent. Je suis sûr qu'il existe un logiciel de reconnaissance de la tête qui vous donnera des vecteurs appropriés. Vous devriez être en mesure de prendre ces vecteurs et les utiliser au lieu d'avoir l'utilisateur tracer des lignes. – Dutchie432

Répondre

1

J'ai créé juste avec succès une culture :) mais pas parfait il devrait fonctionner dans Android ou iPhone/iPad.

Fondamentalement, j'ai utilisé un outil de traçage js pour marquer les coordonnées, enregistrer toutes ces coordonnées quelque part. Puis utilisez les coordonnées de imagemagick, il semble que bien que IM ne recadre pas vraiment les formes impaires, il peut cependant utiliser 'mask' pour convertir le bg de la photo en combinant le stencil (où nous dessinons les lignes en utilisant nos coordonnées , remplissez le bg avec la couleur # 000000) et la photo originale.

Le résultat devrait être la culture que nous recherchons :) maintenant nous avons ajouté un peu de plumes car c'est un peu énervé. Tout cela en utilisant imagemagick.

Maintenant, tout ce dont nous avions besoin, ce sont des lignes courbes car j'ai utilisé le 'chemin' dans IM qui n'offre pas vraiment une culture lisse. Quelqu'un a suggéré d'utiliser des 'courbes cubiques' mais peut nécessiter un codage supplémentaire car il a besoin de paramètres pour chaque coordonnée.

Cette commande va créer notre pochoir (long ensemble de nombres sont nos coordonnées):

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 

Nous combinera ensuite le pochoir avec l'image originale (qui devrait faire ressortir notre « culture » transparent):

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

Enfin, nous amincir les bords:

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

C'est h Maintenant ça marche: https://lh6.googleusercontent.com/_2lSoW37_zqo/TYCD65Vu4zI/AAAAAAAAEcc/vjlCPM54FTI/s800/theoryinpractice.jpg

C'est à peu près tout, j'espère que cela aidera quelqu'un.

+0

bon travail @elijah – Hogan

Questions connexes