$line=$r1["texte"];
if (preg_match_all("|
$i=0;
foreach ($out as $v1) {
foreach ($v1 as $v2) {
$chaine = $out[1][$i];
if ($chaine) {
$line = mini($chaine,$line); // fonction de reduction
}
$i++;
}
}
}
print $line;
Redimensionner photo pour le web mobile
Le web mobile ne peut permettre de charger des images de grande résolution. Les temps de téléchargement risquent d'être longs pour un affichage de surcroit sur un écran de petite taille.
Il convient donc de redimensionner ces images et ce à la volée.
Pour ce faire utilisons PHP avec la bibliothèque GD, et voyons le script en ligne.
La bibliothèque GD, disponible sur les hébergements WEB (peut être pas les hébergements gratuits) permet de redimensionner les images et ce sans avoir à télécharger l'image via FTP, GD va faire ça à la volée.
Pour notre problématique de web mobile, il va de plus falloir détecter la présence d'une image dans le source SQL ou texte et afficher ce code source avec l'image redimensionnée.
Étant donné que la bibliothèque GD est gourmande en CPU, il va également être nécessaire de tester si l'image n'a pas été redimensionnée au préalable. Il faut aussi prendre en compte qu'il peut y avoir plusieurs images et que les images inférieures à une taille donnée seront affichées en l'état. Ouf !
En pseudo code, cet algorithme va avoir la forme suivante :
Pour un article stocké en base :
Lecture de l'article
Pour chaque image trouvée
réduction de l'image et stockage dans un répertoire
remplacement image lu par image réduite
Autre image
Affichage de l'article
$line=$r1["texte"];
if (preg_match_all("|
$i=0;
foreach ($out as $v1) {
foreach ($v1 as $v2) {
$chaine = $out[1][$i];
if ($chaine) {
$line = mini($chaine,$line); // fonction de reduction
}
$i++;
}
}
}
print $line;
Le preg_match_all va aller chercher toutes les images correspondant à notre pattern et alimenter un tableau. Pour chaque image, on appelle la fonction de réduction / remplacement. Lorsque toutes les images sont traitées on affiche l'article avec les images réduites.
Voyons le coeur du sujet, la réduction de l'image à la volée.
Tout d'abord le pseudo code de l'algorithme :
Récupérer le nom de l'image
Récupérer le répertoire de l'image
Récupérer la dimension de l'image
Si la largeur de l'image est supérieure à une largeur donnée
On calcule un taux de réduction
On crée une copie de l'image source à la taille réduite
Sinon
Image réduite c'est l'image source
Fin si
On remplace l'image source par l'image réduite
Ce qui nous donne en PHP quelque chose comme
// fonction de miniature
function mini($chaine, $line) {$findme ="/";
$pos = strrpos($chaine, $findme);
$npos=$pos++;
$rest = substr($chaine, $npos); // image.jpg" width="30" height="30" alt="_"
$pos= strpos($rest,"""); // recherche du " après l'extension
$image=substr($rest, 0, $pos); // nom de l'image
$doss = substr ($chaine, 0, $npos);
if (eregi("alt="(.*)"", $rest, $out)) {
$alt = $out[1];
}
$line=str_replace($chaine, reduit($doss, $image)." Alt="".$alt.""", $line);
return($line);
}// fonction de reduction
function reduit($doss, $img1) {
$source = @imagecreatefromjpeg($doss.$img1); // La photo est la source
// Les fonctions imagesx et imagesy renvoient la larg et la haut d'une image
$largeur_source = @imagesx($source);
$hauteur_source = @imagesy($source);
$pref="small/"; // nom du répertoire vignettes
$img2=$pref.$img1;
$largeur_destination = 170; // taille destination réduite
if ($largeur_source > $largeur_destination ) // grande image
{
$taux=imagesx($source)/$largeur_destination; // on determine un taux
$hauteur_destination=intval($hauteur_source/$taux); // on l'applique
if (!file_exists($img2)) { // a t'on déja reduit ?
$destination = imagecreatetruecolor($largeur_destination, $hauteur_destination);
// On crée la miniature
@imagecopyresampled($destination, $source, 0, 0, 0, 0, $largeur_destination,
$hauteur_destination, $largeur_source, $hauteur_source);
// On enregistre la miniature dans la var2
@imagejpeg($destination, $img2);
}
return ("".$img2."" width="".$largeur_destination.""
height="".$hauteur_destination.""");
}
else
{ // pas de reduction
$img1=$doss.$img1;
return ("".$img1."" width="".$largeur_source."" height="".$hauteur_source.""") ;
}}
Le nom des variables ainsi que les commentaires doivent vous permettre de comprendre ce que l'on fait.
La largeur de 170 peut être adaptée, voire passée en variable pour réellement s'adapter à la taille de l'écran.
Encore faut-il avoir une base des différents mobiles et smart-phones du marché en constante évolution pour s'adapter, ou lire en direct la taille des écrans et redimensionner en conséquence (à suivre ...).
Téléchargement du script : le script initial avec les deux fonctions peut être directement téléchargé ici