Générer des anaglyphes avec javascript et canvas

Il n’y a pas très longtemps, j’ai trouvé des lunettes 3D sur une boîte de Chocapics. Ca m’a rappelé les essais d’images en 3D que je faisais il y a quelques années. La recette est super simple: on prend deux images, une pour l’oeil gauche et l’autre pour l’oeil droit. De l’une, on prend la composante rouge et de l’autre, la composante cyan (bleu+vert). On mélange le tout et… paf! Ca fait un anaglyphe!

Ayant joué récemment avec Javascript et l’élément canvas, je me suis dit que ça pourrait se faire facilement avec ces deux technologies. Après quelques essais, j’ai obtenu un Anaglyph generator qui fonctionne à peu près avec un Firefox, un Safari ou un Opera récent. Concernant Internet Explorer, aucune chance pour le moment: excanvas ne supporte pas encore getImageData ni putImageData.

Pour générer un anaglyphe, il suffit d’indiquer deux URLs d’images et de presser le bouton. Pour simplifier, le resultat est toujours affiché en 640×480 (N’hésitez pas à poster l’URL de votre anaglyphe dans les commentaires!).

Ceux que ça intéresse, peuvent jeter un oeil au code. C’est plutôt simple:

• on charge deux images;
• on attend qu’elles soient complètement chargées;
• on crée deux canvas pour y copier les images;
• on remplace la composante rouge d’un canvas par la composante rouge de l’autre;
• et on affiche le résultat!

Les pièges à éviter

Même si la technique est simple, il y’a tout de même quelques pièges à contourner.

Le premier est la politique de sécurité du navigateur. Comme pour les requêtes XMLHttpRequest, le navigateur ne permet d’accéder aux pixel que des images du même domaine. Du coup, pour pouvoir afficher une image venant d’ailleurs, il faut passer un proxy.

Voilà à quoi ressemble le proxy:

 <?php if (isset($_GET['url']) && preg_match('/^http/i', $_GET['url'])) {     $url = $_GET['url'];     if (preg_match('/.png$/i', $url)) {         header('Content-type: image/png');     }elseif (preg_match('/.jpg$/i', $url)) {         header('Content-type: image/jpg');     }     readfile($url); }

Le second, est qu’il faut s’assurer que les images sont bien chargées. En local, ça va forcément très vite et on n’a jamais de problème. Avec des images distantes, ça peut mettre un peu de temps et empêcher le script de fonctionner. Pour résoudre ce problème, deux trucs:

• utiliser setTimeout pour attendre en boucle que les images soient chargées. La fonction Anaglyph.wait vérifie si les images sont totalement chargée en regardant l’attribut complete. Si ce n’est pas le cas, elle va attendre un peu et s’appeler elle-même à nouveau. Une fois que les deux images sont chargées, elle peut appeler Anaglyph.make qui va générer l’anaglyphe.
• imbriquer le code qui manipules les canvas dans un try/catch pour éviter que le code ne casse.

Si l’élément canvas vous intéresse, il y’a déjà pas mal de ressources intéressantes sur le sujet:

• L’élément Canvas sur DevMo
• Les articles de Dev.Opera sur Javascript

Plein de choses intéressantes ont déjà été faites avec canvas: de la 3D, de la visualisation de musique, de la retouche d’images, des trucages vidéos, etc. Il y’a sûrement encore plein d’autres choses à faire. De quoi me faire réfléchir toute la nuit encore…