Forum Programmation.web Déformer une image avec < canvas >

Posté par  .
Étiquettes : aucune
2
26
juil.
2009
Bonjour,

J'aimerai déformer une image de façon à ce que cette image deviennent cette image.

J'ai cherché dans la doc Mozilla mais leurs transformations sont assez simplistes, le mieux serait de pouvoir déformer à partir d'un chemin que j'ai défini.

(Dans Gimp, cet effet est appelé la perspective)

J'aimerai ne pas devoir passé par l'analyse des pixels un par un.
  • # Mince les liens

    Posté par  . Évalué à 2.

    Voici le 2 images censés illustrer mes propos :

    http://pix.toile-libre.org/upload/original/1248616112.jpg

    Pour donner :

    http://pix.toile-libre.org/upload/img/1248616191.jpg

    « En fait, le monde du libre, c’est souvent un peu comme le parti socialiste en France » Troll

    • [^] # Re: Mince les liens

      Posté par  . Évalué à 2.

      à l'ancienne en Javascript pour permuter les deux images (avant/apres transformation)

      en CSS, toujours pour permuter les 2 images

      le futur ?
      avec < canvas >
      mais il me semble que ca reste du code javascript à creer/utiliser
      • [^] # Re: Mince les liens

        Posté par  . Évalué à 2.

        En fait je voudrais faire le célébre effet de l'iPhone lorsque l'on change d'albums : les pochettes ont un joli effet de transition.
        Mais pour faire quelque chose modulaire et de léger je n'ai pas envie de créer des images que je change à la volée.

        Je vais donc faire la méthode d'analyse par pixel, il ne me reste plus qu'à comprendre l'effet de perspective (utilisé par Gimp par exemple) et à l'appliquer.

        En analysant le problème, il me suffit de définir un point de fuite vers lequel ira l'image, or ce point de fuite devrait être définit en 3D si je veux faire un bon effet, mais je vais essayer de ruser en passant par de la pseudo-3D (en 2D).

        Là je cherche comment avoir la taille d'une image (facile) puis comment accéder à l'image pixel par pixel (moyen) puis créer une image en y placant les pixels un à un (difficile) !

        « En fait, le monde du libre, c’est souvent un peu comme le parti socialiste en France » Troll

        • [^] # Re: Mince les liens

          Posté par  (site web personnel) . Évalué à 2.

          Là je cherche comment avoir la taille d'une image (facile) puis comment accéder à l'image pixel par pixel (moyen) puis créer une image en y placant les pixels un à un (difficile) !

          Regarde la fonction getImageData de l'API de canvas. À partir de là tu peux obtenir la taille de l'image et un tableau de pixels. La fonction putImageData te permet d'écrire tes modifications dans le canvas. Évidemment tu vas devoir ré-implémenter l'algorithme qui fait l'effet que tu veux en javascript. Mais avant toute chose, je te conseille de vérifier que ces fonctions sont bien implémentées dans les navigateurs web que tu vises.

          http://www.whatwg.org/specs/web-apps/current-work/multipage/(...)
          • [^] # Re: Mince les liens

            Posté par  . Évalué à 1.

            Je te raconte pas les perfs du bouzin ...
            • [^] # Re: Mince les liens

              Posté par  . Évalué à 3.

              Ou pas...

              Tu trouveras quelques pointeurs sur ejohn.org , dont un port de processing , des benchmarks et un réseau de neurones en js pour les captchas.
            • [^] # Re: Mince les liens

              Posté par  (site web personnel) . Évalué à 2.

              Il faut voir. Il s'agit d'un algorithme de plaquage de texture et ce genre d'algo marchait déjà plutôt bien il y 15 ans sur mon 486 à 33Mhz. Le web 2.0 a cela de bon qu'il a poussé les développeurs à fournir des moteurs javascript plus performants.
              • [^] # Re: Mince les liens

                Posté par  . Évalué à 2.

                "Plaquage de texture" : voilà le nom ! Maintenant il faut que je plaque une texture en faisant correspondre chaque coins de ma texture aux coins de l'objet.

                « En fait, le monde du libre, c’est souvent un peu comme le parti socialiste en France » Troll

  • # Euh

    Posté par  (site web personnel) . Évalué à 2.

    C'est une simple rotation sur l'ordonnée, centrée sur la tranche gauche de ton image.

    Donc, tu veux
    - avoir ton image dans un tableau de pixels,
    - la multiplier par une matrice
    - recommencer

    Cherche des mots clefs comme "rotation" et "matrice", t'auras toute la doc sous la main.
    • [^] # Re: Euh

      Posté par  . Évalué à 2.

      Il est possible de tracer une image avec une transformation de matrice appliquée (je viens d'essayer : http://pastebin.com/m72154c2d )
      Mais par contre, je doute qu'une bête matrice de transformation 2d suffise à faire l'effet qu'il veut (http://en.wikipedia.org/wiki/Transformation_matrix surtout qu'on ne peut indiquer que 6 des coeffs).
      • [^] # Re: Euh

        Posté par  (site web personnel) . Évalué à 3.

        Ben si !
        Faut une matrice rotation 3D justement (comme je l'ai indiqué)! Et tu mets même un lien correcte (vers le bas, avec projection 3D. C'est ce qu'on veut faire) !
        Plus de détails avec les bonnes matrices pour les rotations dans l'espace ici : ttp://mathworld.wolfram.com/RotationMatrix.html

        Ce qu'il faut faire, c'est donc une translation à droite de la moitié de l'image, le produit avec la matrice (qui se fait donc sur la tranche de l'image), et une translation à gauche (pour la recentrer).
        • [^] # Re: Euh

          Posté par  . Évalué à 2.

          J'ai peut-être mal compris, mais j'ai l'impression qu'il faut que les coefficients de la dernière ligne soient différents de 0, 0, 1, or le setTransform de javascript ne permet pas de les modifier http://www.whatwg.org/specs/web-apps/current-work/multipage/(...) .
          • [^] # Re: Euh

            Posté par  (site web personnel) . Évalué à 3.

            Tu as bien compris.
            J'ai cherché aussi, mais rien à faire, c'est limité sur ce plan.
            On peut donc faire le produit matriciel à la main (ce que j'envisageais initialement), ou utiliser une autre méthode… C'est vraiment dommage de filer une interface bridée comme ça… c'est comme une voiture dont on ne peut pas tourner le volant…
  • # Bloqué sur la déformation de l'image

    Posté par  . Évalué à 2.

    J'ai reussi à faire l'effet iPhone avec un rectangle en appliquant une perspective 3D couplée avec un ajustement pour qu'il soit bien affiché au milieu (plus grand et stable pendant un moment).

    J'ai reussi à récupérer une image puis l'afficher, puis récupérer les données de cette image sous forme d'un tableau de pixels. Ce tableau de pixels, j'ai vu comment il fonctionne : tout les pixels à la suite (pas de 2éme dimension), 4 cases par pixels (rgba).

    Maintenant j'aimerai utiliser les données et les changer pour déformer l'image or la transformation que je voudrais faire c'est faire rentrer une image dans un quadrilatère et c'est là que vient le problème.

    Les transformations par matrice ne sont pas assez complètes.
    J'ai voulu faire un tableau à 3 dimension de l'image (par conversion) : [x][y][rgba] mais la conversion est trop longue pour avoir une application fluide.

    Donc connaitriez vous une façon de "faire rentrer" une image dans un quadrilatère ?

    « En fait, le monde du libre, c’est souvent un peu comme le parti socialiste en France » Troll

Suivre le flux des commentaires

Note : les commentaires appartiennent à celles et ceux qui les ont postés. Nous n’en sommes pas responsables.