Just another experiment with CSS2/CSS3. This time I've redesign my DoYouBuzz CV (best rendered in Google Chrome). I couldn't edit the HTML so every modifications was done using pure css.

Ces 2 dernières minutes, ne sachant pas quoi faire et rempli d'une profonde tristesse, j'ai eu l'idée (et quelle idée, c'est ce genre d'idée qui vous fait perdre votre temps) de créer un script, qui, à partir d'une image (dans notre exemple une image png) va la transformer en code (x)html en utilisant des propriétés css. Le code du script est disponible ici.

Rien de bien compliqué :

1. On récupère la taille de l'image
2. On ouvre l'image
3. On fait une boucle sur les Y et les X
   
• A chaque pixel X:Y on récupère son index
• On créé un div à la position X;Y et on lui applique un background-color en ayant convertit l'index en RGB
  
4. Et voila :)

J'ai ajouté la variable "coef" qui permet de spécifier un coefficient multiplicateur (=zoom), un coef de 1 est la taille normal.

Je pense que des optimisations sont possibles (eh oui, même sur un petit morceaux de code comme celui la !) :

• Il suffirait de stocker tous les index et leurs positions dans un tableau. Ensuite il faudrait regarder si il y a des mêmes index consécutifs pour ainsi créer un seul div - avec une taille plus grande - au lieu de plusieurs, on allège ainsi la taille du rendu html.
• Ou encore, faire une liste des différentes couleurs, leurs créer une classe css, et appliquer cette class sur les div (à condition que le nom des classes ne dépassent pas 2-3 caractères et que l'image ne contienne pas beaucoup de couleur)
  

Ci-joint un exemple généré avec le script et l'image originale utilisée, la page pèse plus de 2.5Mo alors que l'image fait 20.8Ko... Je n'ai jamais dit que le script avait une réel utilité !