Transformer une image en html sans images :)

Découvert sur Twitter grâce à Toucouleur une sympathique technique pour contourner les limitations à afficher les images dans les newsletter

Assez bleffé par cette Technique j’ai rapidement fait une petite fonction php pour appliquer cette technique facilement Seofuckly.com/img2html/

Sympa? :)

la fonction :

  1. function hexcolor($c) {
  2.         $r = ($c >> 16) & 0xFF;
  3.         $g = ($c >> 8) & 0xFF;
  4.         $b = $c & 0xFF;
  5.         return ‘#’.str_pad(dechex($r), 2, ’0′, STR_PAD_LEFT).
  6.                         str_pad(dechex($g), 2, ’0′, STR_PAD_LEFT).str_pad(dechex($b), 2, ’0′, STR_PAD_LEFT);
  7. }
  8.  
  9. function imagize($img) {
  10.        
  11.         $image = imagecreatefrompng($img);
  12.         $width = imagesx($image);  
  13.         $height = imagesy($image);
  14.                
  15.         $table = ‘<table border="0" cellpadding="0" cellspacing="0"><tr height="0">’;
  16.        
  17.         for($horizontal=0; $horizontal<$width; $horizontal++) {
  18.                 $table .= ‘<td width="1"></td>’;
  19.          }
  20.         $table .= ‘</tr>’; //fermer les balises sinon ca fait planter le nav.. c’est pas que pour se la péter le valid W3C
  21.        
  22.         for($vertical=0; $vertical<$height; $vertical++) {
  23.                 $table .= ‘<tr height="1">’;
  24.                         for($horizontal=0; $horizontal<$width; $horizontal++) {
  25.                         $color = imagecolorat($image,$horizontal,$vertical);
  26.  
  27.                                 for($colspan=0; $colspan<($width-$horizontal); $colspan++) {
  28.                                         if ($color != imagecolorat($image,($horizontal+$colspan),$vertical)) {
  29.                                                                         break;
  30.                                         }
  31.                                 }
  32.                        
  33.                                 $horizontal=$colspan+$horizontal-1;
  34.                                
  35.                                 $table .= ‘<td’;
  36.                                 ($colspan)? $table .= ‘ colspan=’.$colspan.‘ ‘: »;
  37.                                 $table .= ‘bgcolor=’.hexcolor($color).‘></td>’;
  38.                          }
  39.                  $table .= ‘</tr>’;
  40.          }
  41.         $table .= ‘</table>’;
  42.        
  43.         return $table;
  44. }

à adapter à votre sauce ;)

5 comments

  1. SeoFuckly
    12/31/2009 à 01:12

    J’ai mis à jour quelques truc dans le lien, le code de couleur par exemple, un poil plus léger..

  2. SeoFuckly
    12/31/2009 à 01:39

    en fait IE8 refuse une couleur de type #FFF à la place de #FFFFFF..
    du grand n’importe quoi, du coup on perd quelques kilos pour ces beaux yeux

  3. Greg
    12/31/2009 à 04:37

    essaye « white » normalement ça passe sous IE !

  4. Tony
    05/19/2010 à 02:59

    Euh intéressant !
    Seulement, quelques inconvénients :
    - code html qui pénalise le référencement du contenu de la page (massif)
    - génération consommatrice en temps et cpu sur grosses images (cache nécessaire/pré-génération)
    - augmentation conséquence du poids de la page

    Il y a toujours l’alternative base 64, non ?

  5. Eric
    07/16/2010 à 04:54

    Bon les images ne sont pas super belles, mais l’idée est bonne et se doit d’être testée. De plus c’est de nouveau à la mode le Vintage :-)