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

Posté par Dorian le 26 juillet 2009 à 17:51.

Étiquettes : aucune

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 Dorian le 26 juillet 2009 à 17:52. É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 NeoX le 27 juillet 2009 à 00:33. É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 Dorian le 27 juillet 2009 à 01:08. É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 jcs (site web personnel) le 27 juillet 2009 à 15:24. É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 benoar le 27 juillet 2009 à 22:08. Évalué à 1.
        
        Je te raconte pas les perfs du bouzin ...
        
        [^] # Re: Mince les liens
        
        Posté par geb le 27 juillet 2009 à 22:52. É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 jcs (site web personnel) le 29 juillet 2009 à 12:38. É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 Dorian le 02 août 2009 à 13:27. É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
        
        [^] # Re: Mince les liens
        
        Posté par jcs (site web personnel) le 04 août 2009 à 19:08. Évalué à 1.
        
        Content d'avoir été utile :D
# Euh

Posté par Axioplase ıɥs∀ (site web personnel) le 28 juillet 2009 à 11:37. É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 Octabrain le 28 juillet 2009 à 15:44. É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 Axioplase ıɥs∀ (site web personnel) le 28 juillet 2009 à 19:47. É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 Octabrain le 28 juillet 2009 à 22:01. É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 Axioplase ıɥs∀ (site web personnel) le 29 juillet 2009 à 14:22. É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 Dorian le 02 août 2009 à 13:08. É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.