[script] Generation d'images à la volée

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par fandecine, 18 Mai 2005.

  1. fandecine
    fandecine WRInaute passionné
    Inscrit:
    2 Avril 2005
    Messages:
    2 142
    J'aime reçus:
    0
    Comme promis dans le post https://www.webrankinfo.com/forum/t/script-mise-en-cache-des-pages-php.28614/ j'ouvre un nouveau fil pour proposer une autre astuce! (j'ai lancé l'idée en espérant être suivi, car à raison d'une astuce par jour, je porrais pas tenir six mois! :wink: ) Alors webmasters, reveillez-vous! vous avez surement des codes à partager! et puis, si ça marche, ça pourrait faire l'objet d'un forum spécifique sur wri!

    bon. on y vas...

    ceux qui ont visité le site de mon profil ont du constater qu'il y avait beaucoups d'images de differentes tailles (affiches de films ou wallpapers)
    avec plus de 8000 affiches et 2500 wallpapers en trois tailles différentes je m'ammuse pas à faire les recadrages à la main, c'est php qui fait ça, et il le fait une bonne fois pour toute et il fait cela lorsque j'iploade l'image sur le serveur.

    Comme pour mon précédant fil, vous pouvez m'insulter si le truc est archi connu! :wink:

    Comment ça marche?

    Prennons l'exemple d'une affiche de film: Elle existe sous trois format (sa taille originale, une taille reduite sur la fiche du film en 260 pixels de large, 185 pixels de haut et une miniature en 85 pixels de large un peu partout ailleurs sur le site)

    le principe est de lire les caracteristiques de l'image originale avec la fonction php getimagesize(), puis de creer une image à partir de son url avec imagecreatefromjpeg(), ensuite on calcule la taille des images à générer puis on les fabrique avec le couple de fonctions imagecreatetruecolor () et
    imagecopyresampled (), à la fin on renvoi un header("Content-Type: image/jpeg") pour voir le resultat.

    voici le code commenté:

    Code:
    <?php
    	$url_img=$_GET["image"];
    	$conn_id = ftp_connect($ftpHost);
    	$login_result = ftp_login($conn_id, $ftpLogin, $ftpPwd); // on se connecte en ftp
    	@ftp_mkdir ( $conn_id, "chemin vers le repertoire 1"); // si le repertoire ou stocker l'image originale n'existe pas on le crée
    	@ftp_site ($conn_id, "CHMOD 777 chemin vers le repertoire 1"); // on donne les droit d'accés à ce répertoire
    	@ftp_mkdir ( $conn_id, "chemin vers le repertoire 2"); // idem pour le repertoire ou on veut stocker le format 85px
    	@ftp_site ($conn_id, "CHMOD 777 chemin vers le repertoire 2");
    	@ftp_mkdir ( $conn_id, "chemin vers le repertoire 3");// idem pour le repertoire ou on veut stocker le format 190px par 260
    	@ftp_site ($conn_id, "CHMOD 777 chemin vers le repertoire 3");
    	list($imx, $imy, $type, $attr) = getimagesize($url_img); //lecture des caracteristiques de l'image à traiter
    	$ims=imagecreatefromjpeg ($url_img); // création de l'image en mémoire à partir de son url
    	imagejpeg($ims,"nom de l'image jpeg",80);// on stocke l'image originale avec un facteur qualité de 80%
    	$ratiox=$imx/190; // on calcule le rapport de réduction en  x
    	$ratioy=$imy/260;// on calcule le rapport de réduction en  y
    	if($ratiox>$ratioy) { // comme on veut pas déformer l'image, on fait un test pour qu'elle s'incrive dans le rectangle 185x260
    		$imd=imagecreatetruecolor (floor($imx/$ratiox),floor($imy/$ratiox));// on fabrique l'image
    		imagecopyresampled ($imd,$ims,0,0,0,0, floor($imx/$ratiox),floor($imy/$ratiox),$imx,$imy);// on la stocke
    	} else {
    		$imd=imagecreatetruecolor (floor($imx/$ratioy),floor($imy/$ratioy));// on fabrique l'image
    		imagecopyresampled ($imd,$ims,0,0,0,0, floor($imx/$ratioy),floor($imy/$ratioy),$imx,$imy);// on la stocke
    	}
    	// on refait la même opération pour l'mage miniature
    	imagejpeg($imd,"nom de l'image jpeg",80);
    	imagedestroy($imd);// on detruit la ressource image qui n'est plus utile
    	$ratiox=$imx/85;
    	$imd=imagecreatetruecolor (floor($imx/$ratiox),110);
    	imagecopyresampled ($imd,$ims,0,0,0,0, floor($imx/$ratiox),floor($imy/$ratiox),$imx,$imy);
    	imagejpeg($imd,"nom de l'image jpeg",80);
    	imagedestroy($ims);// on detruit la ressource image qui n'est plus utile
    	@ftp_site ($conn_id, "CHMOD 755 chemin vers le repertoire 1"); // on protege à nouveau l'accés au repertoire 1
    	@ftp_site ($conn_id, "CHMOD 755 chemin vers le repertoire 2"); // on protege à nouveau l'accés au repertoire 21
    	@ftp_site ($conn_id, "CHMOD 755 chemin vers le repertoire 3"); // on protege à nouveau l'accés au repertoire 3
    	ftp_quit($conn_id); // on ferme la session ftp
    	header("Content-Type: image/jpeg"); // on crée une entête image jpg
    	imagejpeg ($imd); // on retourne l'image miniature
    	imagedestroy($imd); // on detruit la ressource image qui n'est plus utile
    ?>
    dans la page appelant le script on met:

    Code:
    <img src="nomduscript.php?image=url de l'image à traiter">
    Attention! ce genre de script consomme pas mal de ressources mémoire (c'est pour cela que je le lance lorsque j'uploade de nouvelle images) Il peut être nécessaire selon la taille de l'image d'allouer plus de mémoire au script en ajoutant dans le .htaccess:
    Code:
    php_value memory_limit 64M
    voilà! c'est tout.
     
  2. gorgu
    gorgu WRInaute occasionnel
    Inscrit:
    23 Mars 2005
    Messages:
    340
    J'aime reçus:
    0
    tu pourrais verifier l'existance de l'image afin de ne faire ce redimentionnement qu'une seule fois. je vais chercher le bout de script et je le mets ici
     
  3. gorgu
    gorgu WRInaute occasionnel
    Inscrit:
    23 Mars 2005
    Messages:
    340
    J'aime reçus:
    0
    bon on va dire que tu as un repertoire taille1 taille2 taille3

    en debut de fichier
    <?
    if (file_exists("taille1/$image")
    {
    header( "location: taille1/l$image");
    }
    else
    {

    ton fichier
    avec à la fin

    imagejpeg ($imd,"taille1/$image");
    imagejpeg ($imd);
    ImageDestroy ($imd);
    ?>
     
  4. fandecine
    fandecine WRInaute passionné
    Inscrit:
    2 Avril 2005
    Messages:
    2 142
    J'aime reçus:
    0
    d'accord avec toi, mais telle que je le présente ce script est à inclure dans un back office (outils de mise à jour de site) et nom pas sur le site lui même (d'ailleur sur le mien, avec la mise en cache des pages php ça marcherais pas de faire un file_exists()!) Et dans la cas d'un back office, l'image étant nouvelle, tu est sur qu'elle n'existe pas déjà, qlqsoit le format.
     
  5. dreamclic
    dreamclic WRInaute occasionnel
    Inscrit:
    3 Juillet 2004
    Messages:
    408
    J'aime reçus:
    0
    le problème, c'est que si tu décides de changer la taille d'affichage sur ton site, t'as tout à refaire.

    Nous, on upload l'image originale et on stocke le fichier généré au premier affichage.

    C'est ce fichier qu'appelle le script directement s'il existe déjà
     
  6. caro
    caro WRInaute impliqué
    Inscrit:
    21 Juillet 2003
    Messages:
    867
    J'aime reçus:
    0
    fandecine je suis fan de toi :D
    merci pour ce nouveau script, si tout le monde prenait le temps de partager comme toi, je t'explique pas les progressions qu'on ferait.
    encore merci :wink:
    carole
     
  7. e-kiwi
    e-kiwi WRInaute accro
    Inscrit:
    23 Décembre 2003
    Messages:
    15 236
    J'aime reçus:
    0
    lol ca s'appelle l'open source ...
     
  8. shrom
    shrom WRInaute impliqué
    Inscrit:
    5 Juillet 2004
    Messages:
    854
    J'aime reçus:
    0
    Mais les gens n'y sont pas encore sensibilisés, il faut continuer l'*Evangélisme*.

    Prenons l'exemple de Linux. Bon ça va les webmasters savent ce que c'est. IBM nous fait un matraquage publicitaire depuis des années sur Linux et bien le commun des mortel dit ne jamais en avoir entendu parlé, les SSII clament haut et fort que c'est un truc pour bidouilleurs qu'il ne faut pas utiliser en production ...

    Je commence à désespérer.
     
  9. fandecine
    fandecine WRInaute passionné
    Inscrit:
    2 Avril 2005
    Messages:
    2 142
    J'aime reçus:
    0
    arrête carole :oops:
     
  10. fandecine
    fandecine WRInaute passionné
    Inscrit:
    2 Avril 2005
    Messages:
    2 142
    J'aime reçus:
    0
    mon problème, c'est que je met les pages en cache pour soulager le serveur. Donc si je génére l'image au premier chargement de la page, les cript sera appellé également aux chargement suivants. Donc les economies de ressources que j'obtiens avec la mise en cache sont perdues, car, question ressources, ce script en consomme pas mal (surtout de la mémoire).
     
  11. Den-S
    Den-S Nouveau WRInaute
    Inscrit:
    30 Mars 2004
    Messages:
    11
    J'aime reçus:
    0
    Salut,

    sympa de faire partager tes scripts ! Moi j'utilise le même genre de systeme pour des images et leurs vignettes par contre j'utilise netpbm pour redimensionner les images qui donne un meilleur résultat et consomme moins de ressources apache. Par contre c'est un programme externe à php donc il faut qu'il soit installé sur le serveur.

    un petit comparatif gd/netpbm : http://gallery.menalto.com/modules.php? ... file=index
     
  12. spijoelx
    spijoelx WRInaute discret
    Inscrit:
    6 Février 2004
    Messages:
    241
    J'aime reçus:
    0
    :p
     
  13. fandecine
    fandecine WRInaute passionné
    Inscrit:
    2 Avril 2005
    Messages:
    2 142
    J'aime reçus:
    0
    Oups! pas assez rapide, mais j'allais le dire! :wink:
     
  14. Tex
    Tex WRInaute occasionnel
    Inscrit:
    9 Juillet 2004
    Messages:
    422
    J'aime reçus:
    0
    perso je fait tous mes resize d'images lors de l'upload avec le script qui upload l'image originale (pas besoin de FTP), comme ça le resize est fait une bonne fois pour toutes, si un jour une nouvelle taille apparait je ferait un script pour tout resizer depuis l'original qui est également sur le serveur. (pour l'anecdote je bosse aussi pour un site de cine :) (un gros))
     
  15. itsme
    itsme WRInaute impliqué
    Inscrit:
    13 Octobre 2004
    Messages:
    719
    J'aime reçus:
    0
    ... et moi je compresse a l'upload et resize dynamiquement en jouant sur les parametres de la balise img a la generation de la page, ainsi une seule image sert pour differentes presentations et il n'y a pas de charge serveur :)
     
  16. fandecine
    fandecine WRInaute passionné
    Inscrit:
    2 Avril 2005
    Messages:
    2 142
    J'aime reçus:
    0
    Mais là, c'est l'internaute qui est pénalisé car le poids de la petite image est le même que la grosse!

    Personnellement, je génère toutes les images dont j'ai besoin à l'upload (parfois 4 ou 5 tailles différentes) et je la fais même sur plusieurs sites à la fois!

    Un jour, peut-être, je publierais le script complet de ce back-office! :wink:
     
  17. itsme
    itsme WRInaute impliqué
    Inscrit:
    13 Octobre 2004
    Messages:
    719
    J'aime reçus:
    0
    Tu as mal lu: je compresse a l'upload ;)
     
  18. Tex
    Tex WRInaute occasionnel
    Inscrit:
    9 Juillet 2004
    Messages:
    422
    J'aime reçus:
    0
    ouais mais du coup la grosse image est moche :)
     
  19. itsme
    itsme WRInaute impliqué
    Inscrit:
    13 Octobre 2004
    Messages:
    719
    J'aime reçus:
    0
    Il est exact que je ne fait pas d'affiches de film, juste des vignettes et des images a inclure dans les descriptions :)

    Mais le rendu est suffisant pour l'usage: Résumé et zoom
     
  20. Den-S
    Den-S Nouveau WRInaute
    Inscrit:
    30 Mars 2004
    Messages:
    11
    J'aime reçus:
    0
    Oui je l'ai lu aussi qu'avec GD2 la qualité est meilleure. N'empeche que je je maintiens que ça te bouffe moins de ressources sur apache qui est déjà bien assez gourmand comme ça. En plus de ça tu as des fonctions de recadrage pour les vignettes qui sont vraiment sympas. Dommage que je ne puisse pas vous montrer car ça se trouve dans mon back office mais dans la galerie photo ça donne ça :
    http://www.kr1deg1.com/tee-shirt-people.php

    et tout ça se fait en ligne sans un logiciel de type toshop. Enfin bref. Mais GD2 c'est bien aussi ! :D
     
  21. MagicManu
    MagicManu WRInaute discret
    Inscrit:
    26 Juin 2004
    Messages:
    76
    J'aime reçus:
    0
    Petite question ici pour éviter de recréer un topic ;)

    J'aimerai savoir si il y a moyen de régler le taux de compression lors de la création d'une image JPG ?

    Merci ;)



    Edit : c'est bon j'ai trouvé : imagejpeg($destination,'',100);
     
  22. TotoZeRigolo
    TotoZeRigolo Nouveau WRInaute
    Inscrit:
    26 Septembre 2005
    Messages:
    39
    J'aime reçus:
    0
    Salut à tous !

    moi aussi j'utilise le redimensionnement d'images dynamiques. D'ailleur, je n'utilise que ca. Mais à la différence de vous, jai développé un module de retouche d'image, qui me permet de générer les images à la volées lors de l'affichage des pages.
    voir : http://www.agencement-hotellerie.com
    et : http://www.agencement-hotellerie.com/fo ... 6_480.html (pour voir les logos de tailles différentes sur la même page)
    Tous les logos en page d'accueil et en colone de droite sont générées à la volées. L'originale étant la version "grande" visible sur la page du fournisseur.
    L'interet de mon module est de configurer une retouche différente pour la même image via des fichiers INI. De ce fait, le jour ou j'ai besoin de changer un paramêtre de redimension, ca se fait automatiquement, sur toutes les images concernées.

    Le problème en effet, c'est que c'est lourd de regénérer à chaque fois (ce qui est le cas sur le site sité plus haut).

    Suite à la lecture de vos post hier, j'ai rajouter ce matin, la mise en cache automatique des images retouchée (facultatif), et cette mise en cache est paramêtrable dans le temps. De plus une modification du fichier INI pour changer la taille des images par exemple va regénérer automatiquement de nouvelles images en cache.
    Donc, aucune manipulation à faire. Pour remettre à jour les images, juste a effacer en FTP le dossier cache. Elle se recrérons lors du prochain appel.

    Et du coup, je peu mettre toutes mes images en FTP, sans m'inquiéter de la résolution finale.

    Si vous êtes extrèmement sages, je songerai à vous filer mon code ... a savoir, qu'il est complètement paramêtrable, qu'il gère tous les formats d'images en entrée et sortie (gérés par la GD2), et qu'il permet même de dessiner directement sur l'image (genre, ajouter un contour, un texte ... )

    A+
    Nico
     
  23. gratonet
    gratonet Nouveau WRInaute
    Inscrit:
    3 Octobre 2005
    Messages:
    6
    J'aime reçus:
    0
    Re images

    Salut tlm,

    Je suis nouveau ici alors me tapez pas dessus trop fort :D

    Je ne veux pas me méler de vos blemes d'images mais au lieu de vous ennuyer avec un tas de manips sur le serveur, pourquoi ne pas redimensionner vos images sur votre pc avant de les envoyer sur le serveur ?
    La création dynamiques d'images n'est utile que pour des images de style graphiques de stats, etc.

    Je suis développeur web je voulais juste vous conseiller. Si vous n'avez pas d'éditeur moi je peux vous fournir un logiciel (uniquement pour PC) qui permet de créer toutes vos images en un bloc dans une dimension voulu. vous n'avez ensuite qu'à les virer sur ftp. Pas de ressources bousillées et c bien plus pratique.

    Un petit cadeau pour vous. C un objet this que j'ai réalisé il y a quelques années. Il permet de créer une visioneuse d'images sur vos pc. Il fonctionne sur netscape et ie. Je n'ai pas refait la mise à jour pour les nouveaux navigateurs il me sert à rien.

    Code:
    /*
    ** Viewer.js 
    ** Copyright © Chérif Yahiaoui 2001 - 2003
    ** www.azwin.com Or www.gratonet.com
    */
    
    function Viewer(){
    	this.Version = "0.01 [Viewer.js; Viewer Element; 170102]";
    	this.Name = "Viewer" + (Viewer.Count++);
    	this.Layer = null;
    	this.nie=(document.layers)? true : ((document.all)? false : null);
    	this.BackColortable = "#FFFFFF";
    	this.BackColorSquare = "#FF80FF";
    	this.CellsSpacingtable = 5;
    	this.Square = 100;
    	this.Alignement = "CENTER"; // left, right ou center par défaut
    	this.SmallImages = new Array();
    	this.BigImages = new Array();
    	this.ImagesUrl = "";
    	this.Window = null;
    	this.WindowLeft = 1;
    	this.WindowTop = 1;
    	this.WindowWidth = 500;
    	this.WindowHeight = 500;
    	this.WindowBackColor = "#000000";
    	this.AddItem = Viewer_AddItem;
    	this.ImageLoading = false;
    	this.Imageobj = null;
    	this.CreateViewer = Viewer_CreateViewer;
    	this.ConvertCoordSmall = Viewer_ConvertCoordinatesSmall;
    	this.loadimage = Viewer_loadimage;
    // spécial netscape
    if (this.nie){
    	this.Top = 20;
    	this.ImageNsp = null;
    	this.SrcSource = "";
    	this.IndexImage = -1;
    	this.IndexCel = -1;
    	this.NumberCells = 0;
    	this.WidthTable = 0;
    	this.CreateSourceNsp = Viewer_CreateSourceNsp;
    	this.CreateNetscape = Viewer_CreateNetscape;}
    	this.NsIeLoadBigImage = Viewer_NsIeLoadBigImage;
    	this.Vardoc = this.Name+"Object"; 
    	eval(this.Vardoc+"=this");
    
    }
    Viewer.Count = 0;
    
    function Viewer_AddItem (smallimg, bigimg){
    	if (this.nie == null){ return;}
    	if (smallimg.length == 0 ){
    	this.SmallImages[this.SmallImages.length] = bigimg;
    	}else
    	{this.SmallImages[this.SmallImages.length] = smallimg;}
    	this.BigImages[this.BigImages.length] = bigimg;
    }
    
    function Viewer_ConvertCoordinatesSmall(Objimg, index){
    if (this.nie == true || this.nie == null){ return;}
    var frmx , frmy, xl , xh , m;
    var ValX , ValY
    	ValX = Objimg.width;
    	ValY = Objimg.height;
    frmx = this.Square;
    frmy = this.Square;
    	if (ValX > frmx){
    	xl = frmx;
    	m = (ValY/ValX)*100;
    	xh = (xl/100)*m;
    		if (xh > frmy || xl > frmx){
    		xh = frmy;
    		m = (ValX/ValY)*100;
    		xl = (xh/100)*m; }
    	}
    if (ValY > frmy){
    	xh = frmy;
    	m = (ValX/ValY)*100;
    	xl = (xh/100)*m
    		if(xh > frmy || xl > frmx){
    		xl = frmx;
    		m = (ValY/ValX)*100;
    		xh = (xl/100)*m;}
    }else{
    xh = Math.floor(ValY); xl = Math.floor(ValX); }
    Objimg.width = xl; Objimg.height = xh;
    Objimg.style.visibility = "visible";
    }
    
    function Viewer_CreateSourceNsp(){
    if (this.nie == false || this.nie == null){ return;}
    var frmx , frmy, xl , xh , m;
    var ValX , ValY
    	ValX = this.ImageNsp.width;
    	ValY = this.ImageNsp.height;
    frmx = this.Square;
    frmy = this.Square;
    	xh = null; xl = null;
    	if (ValX > frmx){
    	xl = frmx;
    	m = (ValY/ValX)*100;
    	xh = (xl/100)*m;
    	if (xh > frmy || xl > frmx){
    	xh = frmy;
    	m = (ValX/ValY)*100;
    	xl = (xh/100)*m; }}
    	if (ValY > frmy && xh == null){
    	xh = frmy;
    	m = (ValX/ValY)*100;
    	xl = (xh/100)*m;
    	if(xh > frmy || xl > frmx){
    	xl = frmx;
    	m = (ValY/ValX)*100;
    	xh = (xl/100)*m;}
    	}else if (xh == null && xl==null){ xh = ValY; xl = ValX; }
    xh = Math.floor(xh); xl = Math.floor(xl);
    this.SrcSource += '<td align=center width=\"'+this.Square+'\" height=\"'+this.Square+'\" bgcolor=\"'+this.BackColorSquare+'\" >\n';
    this.SrcSource += '<CENTER>\n';
    this.SrcSource += '<A HREF=\"javascript:void('+this.Vardoc+'.loadimage('+this.IndexImage+'))\" >\n';
    this.SrcSource += '<IMG NAME="vieimg'+this.IndexImage+ '" SRC=\"'+this.ImagesUrl+this.SmallImages[this.IndexImage]+'\" BORDER=\"0\" WIDTH=\"'+xl+'\" HEIGHT=\"'+xh+'\" >';
    this.SrcSource += '</A>\n';
    this.SrcSource += '</CENTER>\n';
    this.SrcSource += '</td>\n';
    this.ImageNsp = "";
    this.CreateNetscape();
    }
    
    function Viewer_CreateNetscape(){
    if (this.nie == false || this.nie == null){ return;}
    if (this.IndexImage == -1){
    	this.SrcSource = '<center>\n';
    	this.SrcSource += '<table cols='+this.NumberCells+' width=\"'+this.WidthTable+'\" cellspacing='+this.CellsSpacingtable+' cellpading=0 border=0 bgcolor=\"'+this.BackColortable+'\" >\n'; }
    if ((this.IndexCel == this.NumberCells-2) || (this.IndexImage == this.SmallImages.length-1)){ 
    this.SrcSource += '</tr>\n'; this.IndexCel = -1;}
    if (this.IndexCel == -1){ this.SrcSource += '<tr align=center>\n'; }
    this.IndexCel ++;
    this.IndexImage ++;
    if (this.IndexImage < this.SmallImages.length){
    this.ImageNsp = new Image();
    var urlme = this.ImagesUrl+this.SmallImages[this.IndexImage];
    this.ImageNsp.onload = new Function(this.Vardoc+".CreateSourceNsp(); return (false);");
    this.ImageNsp.src = urlme;
    }else{
    this.SrcSource += '</table>\n';
    this.SrcSource += '</center>\n';
    this.Layer = createlayer();
    this.Layer.left = Math.floor((window.innerWidth - this.WidthTable)/2);
    this.Layer.top = this.Top;
    this.Layer.clip.width = this.WidthTable;
    this.Layer.document.open();
    this.Layer.document.write(this.SrcSource);
    this.Layer.document.close();
    this.Layer.visibility = "show";
    
    this.ImageNsp = null;
    }
    }
    
    function Viewer_CreateViewer(){
    	if (this.nie == null){ return;}
    	var x = (this.nie)? window.innerWidth : document.body.clientWidth;
    	var numberimagesWidth = Math.floor((x - this.CellsSpacingtable) / (this.Square + this.CellsSpacingtable));
    	var tablewidth = numberimagesWidth * this.Square;
    	if (this.nie){
    	this.NumberCells = numberimagesWidth;
    	this.WidthTable = tablewidth;
    	this.CreateNetscape(); return;}
    	document.body.insertAdjacentHTML("BeforeEnd",'<TABLE ID="'+ this.Name + '"></TABLE>');
    	var metable =  document.all[this.Name];
    	metable.setAttribute("COLS",numberimagesWidth,"true");
    	metable.setAttribute("WIDTH",tablewidth,"true");
    	metable.setAttribute("CELLSPACING",this.CellsSpacingtable,"true");
    	metable.setAttribute("CELLPADING",0,"true");
    	metable.setAttribute("BORDER",0,"true");
    	metable.setAttribute("ALIGN",this.Alignement,"true");
    	metable.style.backgroundColor = this.BackColortable;
    	for (var i = 0; i <  this.SmallImages.length; i++){
    		var merow = metable.insertRow();
    		for (var j = 0; j < (numberimagesWidth); j++){
    		if (i == this.SmallImages.length ){break;}
    		var mecell = merow.insertCell();
    		mecell.setAttribute("WIDTH",this.Square,"true");
    		mecell.setAttribute("HEIGHT",this.Square,"true");
    		mecell.style.backgroundColor = this.BackColorSquare;
    		var Mesource = '<A HREF=\"javascript:'+this.Vardoc+'.loadimage('+i+');\" >';
    		Mesource += '<CENTER><IMG NAME="vieimg'+i+ '" SRC=\"'+this.ImagesUrl+this.SmallImages[i]+'\" ';
    		Mesource += 'BORDER=\"0\" onload=\"'+this.Vardoc+'.ConvertCoordSmall(this,'+i+');\" ';
    		Mesource += 'STYLE=\"visibility:hidden;\"';
    		Mesource += '></CENTER></A>\n';
    		mecell.insertAdjacentHTML("BeforeEnd",Mesource);
    		if (j< (numberimagesWidth-1)){ i++};
    		}
    	}
    }
    
    function Viewer_loadimage(index){
    	if (this.nie == null ){ return;}
    	if (this.Window == null){
            this.Window = window.open("about:blank","Vieweryc","toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no,
    width="+this.WindowWidth+",outerWidth="+this.WindowWidth+",height="+this.WindowHeight+",outerHeight="+this.WindowHeight+",
    left="+this.WindowLeft+",screenX="+this.WindowLeft+",top="+this.WindowTop+",screenY="+this.WindowTop+'"');
    	}
    	if(this.Window.closed){
            this.Window = window.open("about:blank","Vieweryc","toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no,
    width="+this.WindowWidth+",outerWidth="+this.WindowWidth+",height="+this.WindowHeight+",outerHeight="+this.WindowHeight+",
    left="+this.WindowLeft+",screenX="+this.WindowLeft+",top="+this.WindowTop+",screenY="+this.WindowTop+'"');
    	}
    	this.ImageNsp = new Image();
    	var urlme = this.ImagesUrl+this.BigImages[index];
    	if (this.nie){this.ImageNsp.onload = new Function(this.Vardoc+".NsIeLoadBigImage(); return (false);");}
    	if (!this.nie){this.ImageNsp.onload = new Function(this.Vardoc+".NsIeLoadBigImage()");}
    	this.ImageNsp.src = urlme;
    }
    
    function Viewer_NsIeLoadBigImage(){
    if (this.nie == null){ return;}
    	var frmx , frmy, xl , xh , m;
    	var ValX , ValY;
    	var mew = (this.nie)? this.Window.innerWidth : this.Window.document.body.offsetWidth;
    	var mey = (this.nie)? this.Window.innerHeight : this.Window.document.body.offsetHeight;
    	ValX = this.ImageNsp.width;
    	ValY = this.ImageNsp.height;
    	frmx = mew; frmy = mey;
    	xh = null; xl = null;
    	if (ValX > frmx){
    	xl = frmx;
    	m = (ValY/ValX)*100;
    	xh = (xl/100)*m;
    	if (xh > frmy || xl > frmx){
    	xh = frmy;
    	m = (ValX/ValY)*100;
    	xl = (xh/100)*m; }}
    
    	if (ValY > frmy && xh == null){
    	xh = frmy;
    	m = (ValX/ValY)*100;
    	xl = (xh/100)*m;
    	if(xh > frmy || xl > frmx){
    	xl = frmx;
    	m = (ValY/ValX)*100;
    	xh = (xl/100)*m;}
    	}else if (xh == null && xl==null){ xh = ValY; xl = ValX; }
    xh = Math.floor(xh); xl = Math.floor(xl);
    var left1 = Math.floor((mew - xl)/2);
    var top1 =  Math.floor((mey - xh)/2);
    
    	var mesource = '<div id="loading" style="position:absolute; left:'+left1+'px; top:'+top1+'px; width:'+xl+'px; height:'+xh+'px;">';
    	mesource += '<IMG ALIGN="TOP" NAME="bigimagviewer" SRC=\"'+this.ImageNsp.src+'\" BORDER=\"0\" WIDTH=\"'+xl+'\" HEIGHT=\"'+xh+'\" >';
    	mesource += '</div>';
    	this.Window.document.open();
    	this.Window.document.write(mesource);
    	this.Window.document.close();
    	this.Window.document.bgColor = this.WindowBackColor;
    	this.Window.focus();
    	this.ImageNsp = "";
    }
    
    function createlayer(){
    var n = new Layer(1);
    return n
    }
    
    A+[/code]
     
  24. alien7
    alien7 Nouveau WRInaute
    Inscrit:
    20 Octobre 2005
    Messages:
    17
    J'aime reçus:
    0
    Salut à tous,

    moi je suis obligé de passer par gd2 car c'est l'utilistaeur qui va fournir l'image, donc resize par le serveur apache. Vous dites que ca consomme beaucoup en ressource mais c'est pendant un laps de temps ca de 5 second environ. Ca ne perturbera pas vraiment le serveur non ?

    Sinon dans mon cas vous me conseillerez quoi ??

    Pour info j'ai crée un script du meme style que fandecine.

    Merci
     
  25. fandecine
    fandecine WRInaute passionné
    Inscrit:
    2 Avril 2005
    Messages:
    2 142
    J'aime reçus:
    0
    Re: Re images

    Ouaip! mes 110000 pages, tu me propose de les écrire en html et de les uploader aussi!

    Soyons serieux! j'ai 25000 images dans des formats différents, tu crois que je vais passer mon temps à les redimensionner une a une avant de les uploader?

    Et puis, PHP, c'est bien pour faire des sites dynamiques?! :wink:
     
  26. zimounet
    zimounet WRInaute passionné
    Inscrit:
    8 Novembre 2004
    Messages:
    1 770
    J'aime reçus:
    0
    Je ne comprend pas bien le script, a quoi sert il d'ouvrir trois répertoire, et traiter les images, et de les refermer (changer les droits a nouveau) en fin de script pour ne pas enregistrer les images ainsi créer dans les répertoires ouvert?
     
  27. fandecine
    fandecine WRInaute passionné
    Inscrit:
    2 Avril 2005
    Messages:
    2 142
    J'aime reçus:
    0
    alors zimounet! on ne lis pas le topic en entier? :wink:

    Comme je le dis dans les explication, le but de ce script est de générer automatiquement à partir d'une image jpg, 3 autres images dans des formats (dimenssions) diferrents.

    Ces trois images sont stockées dans trois répertoires differents, qui sont protégés par des droits d'accés. Les oppérations se faisont en FTP, je commence par donner des droits d'accés 777 pour que le script puisse accéder à ces répertoires ( le script php n'as pas forcement les droits d'écriture dans les répertoires en question) et à la fin du traitement, je rétabli les droit d'accés initiaux des répertoires.

    c'est tout! :D
     
  28. Ron56
    Ron56 WRInaute impliqué
    Inscrit:
    20 Novembre 2005
    Messages:
    671
    J'aime reçus:
    0
    Je n'est pas tester les scripts mais avez vous un script , qui permet de faire une gallerie , en uploadant des photos dans un repertoire puis en uploadant un index.php on obtient une page de miniatures qui lorsque l'on clique s'affiche a la taille de l'écran ?

    Voila je pense qui un script de ce type aurait du succès !

    Voila bonne journée :wink:
     
  29. fandecine
    fandecine WRInaute passionné
    Inscrit:
    2 Avril 2005
    Messages:
    2 142
    J'aime reçus:
    0
    c'est pas trés compliqué! :wink:

    Voici le script qui génére automatiquement la galerie d'images miniatures:
    Code:
    <?php
         $conn_id = ftp_connect(hôteftp);
         $login_result = ftp_login($conn_id, loginftp,passwordftp);
         $Files=ftp_nlist($conn_id, "cheminftp du repertoirecontenant les images");
         ftp_quit($conn_id);
         if($Files[0]!="") { 
    ?>
    <p align="center">cliquez sur les photos pour les agrandir<br />
    <?php
         for ($i=0;$i<count($Files);$i++) {
              $laGalerie[$i] = "cheminhttpdurepertoirecontenantlesimages/".substr ($Files[$i], strrpos($Files[$i],"/")+1);  
         }
         $maLargeur=0;
         for($i=0;$i<count($laGalerie);$i++){
             list($imx, $imy, $type, $attr) = getimagesize($laGalerie[$i]);
    ?>
    <a href="javascript:zoomimg('<?php echo $laGalerie[$i];?>');">
    <img src="/miniature.php?Galerie=<?php echo $laGalerie[$i];?>" border="1" vspace="5" hspace="5" >
    </a>
    <?php 	} } ?>
    </p>
    
    un petit javascript simple pour afficher l'image pleine taille:


    Code:
    <script language="JavaScript" type="text/JavaScript">
    <!--
    function zoomimg(image) {
        newWindow=window.open(image,'Photo','toolbar=no,location=no,directories=no,status=yes,menubar=no,scrollbars=yes,resizable=yes,width=640,height=480');
    	newWindow.focus();
    	return;
    }
    // -->
    </script>
    
    Pour le script de génération de miniature (miniature.php) référe toi à ce que j'ai déjà publié dans ce topic. :D
     
  30. zimounet
    zimounet WRInaute passionné
    Inscrit:
    8 Novembre 2004
    Messages:
    1 770
    J'aime reçus:
    0
    finalement, je me suis fait ma propre fonction, je la publierai si sa interresse quelqu'un.
     
  31. Maze12
    Maze12 WRInaute occasionnel
    Inscrit:
    7 Juillet 2005
    Messages:
    495
    J'aime reçus:
    0
    je suis en train de une class galerie avec comme tu precise la possibilité de mettre les photos par repertoire (il cree 3 type de format) il gere automatique les page posibilite de les rajouter une par une, disposition paramettrable, url_rw et tout ca parametrable par un panneau d'admin et sans Bdd.
    Je la mettrai a disposition des qu'elle sera potable (le code est encore "cradoc" et il reste des bug de portabilité :)

    pour voir ce que ca donne c'est ici -> http://www.logitour-repdom.com/photo-re ... caine.html
     
  32. fenixe
    fenixe Nouveau WRInaute
    Inscrit:
    9 Mai 2006
    Messages:
    33
    J'aime reçus:
    0
    Salut a tous.

    J'ai fait un petit script pour que les visiteurs de mon site puissent poster une photo, leur post s'enregister ds une bdd, et j'ai ensuite une page qui viste la bdd pour mettre en page toutes les images postées par ce script.

    Dans cette page, j'ai une miniature de chaque image, une moyenne et quand on clique sur la moyenne ça affiche la grande.

    Seulement je n'ai pas su comment faire pour céer trois images différentes dynamiquement quand le visiteur poste la sienne, et du coup c'est la grande image qui est affichée en petit et en moyen, et donc ça ralentit le chargement de la page...

    Si vous avez quelque chose a me proposer je serai heureux, je pense par exemple au code de tex qui a l'air parfait, si tu pouvais me le filer... ou sinon celui de zimounet, je pourait peut etre en faire quelque chose.

    Merci
     
  33. rog
    rog WRInaute passionné
    Inscrit:
    21 Septembre 2006
    Messages:
    1 643
    J'aime reçus:
    0
    lol

    juste pour remarquer que :

    faire appel à un programme externe à php pour redimentionner les images implique que php ne tourne pas en safe mode

    ça peut se révéler très dangereux

    source : zone-h.org

    lol

    rog
     
  34. gorchfock
    gorchfock WRInaute impliqué
    Inscrit:
    23 Octobre 2006
    Messages:
    739
    J'aime reçus:
    0
    Bon ben moi il va falloir que je m'y mette à faire la création d'images à la volée :D , car pour l'instant j'y vais au burin :roll: , mais comme j'ai peu de photos et qu'en plus je rajoute une ombre portée ... :roll: Fandecine, en modifiant un peu ton script, c'est possible de rajouter l'ombre portée :?: (je t'avoue que je ne l'ai pas lu en entier, et comme en ce moment je prépare une certif PHP :!: :!:)

    A+
     
  35. XenonDelee
    XenonDelee WRInaute impliqué
    Inscrit:
    6 Avril 2004
    Messages:
    873
    J'aime reçus:
    0
    voila une façon simple de redimensionner les images lors de l'upload

    Code:
    function miniaturiser($file,$nom,$rep){
    $size = getimagesize($file); 
    $largeur=$size[0];
    $hauteur=$size[1];
    $dest_width=round(($largeur*0.4),0);
    $dest_eight=round(($hauteur*0.4),0);
    $src_img = imagecreatefromjpeg($file);
    $dst_img = imagecreatetruecolor($dest_width,$dest_eight);
    imagecopyresampled($dst_img, $src_img, 0, 0, 0, 0, $dest_width, $dest_eight,$size[0], $size[1]); 
    $nom=$rep.$nom;
    imagejpeg($dst_img,$nom, 60);
    }
    l'image est ici réduite de 40%

    Code:
    $dest_width=round(($largeur*0.4),0);
    $dest_eight=round(($hauteur*0.4),0);
    Vous pouvez changer le pourcentage ...

    ps : le code n'est pas totalement de moi ... je me suis inspiré de ce que j'ai trouvé sur le net ... mais je me souviens plus où ... donc dsl de ne pas citer ma source ... mais comme qui disait plus haut ... vive l'open source :p
     
  36. XenonDelee
    XenonDelee WRInaute impliqué
    Inscrit:
    6 Avril 2004
    Messages:
    873
    J'aime reçus:
    0
    ps 2

    petite amélioration du code précédent

    Code:
    function miniaturiser($file,$nom,$pourcentage){ 
    $size = getimagesize($file); 
    $largeur=round(($size[0]*$pourcentage),0); 
    $hauteur=round(($size[1]*$pourcentage),0); 
    $src_img = imagecreatefromjpeg($file); 
    $dst_img = imagecreatetruecolor($largeur,$hauteur); 
    imagecopyresampled($dst_img, $src_img, 0, 0, 0, 0, $largeur, $hauteur,$size[0], $size[1]); 
    imagejpeg($dst_img,$nom, 60);
    }
    comme ça on passe le pourcentage en paramètre ... et en plus c'est plus court ...

    variables :

    $file=le nom du fichier de départ avec le chemin ( ex: ../photos/monimage.jpg )
    $nom = le nom de la miniature avec le chemin ( ex: ../photos/m_monimage.jpg )
    $pourcentage : le chiffre doit être un 0.... ( ex : 0.5 pour 50 % )

    et voilou :lol:
     
  37. extremenet
    extremenet WRInaute discret
    Inscrit:
    2 Octobre 2006
    Messages:
    169
    J'aime reçus:
    0
    RE

    J'ai reussi à faire une fonction avec ce que j'ai pu trouver

    Le probleme c'est qu'il n'arrive pas à créer la deuxiéme image.

    Si quelqu'un peu m'aider sur cette fonction

    Code:
    if(!empty($_FILES["fichierimage"]["name"])){
    
    $racine="avatar";
    $width_max  = 1100;        // Largeur max de l'image en pixels 
    $height_max = 1100; 
    $max_size   = 500000; 
    
    $name = $_FILES["fichierimage"]["name"];
          $ext = substr($name, strrpos($name, ".") + 1); 
          $nom_fichier=basename($name,".".$ext);
    	  $extension = strrchr($name, ".");
    
    
    
            		$nom_fichier="avatar$_SESSION[id_membre].$ext";
         	$filename = "$racine/$nom_fichier";
    			    if (@move_uploaded_file($_FILES["fichierimage"]["tmp_name"], "$racine/$nom_fichier")){
             @chmod("$racine/$nom_fichier", 0777);
    		   
    
    
    if ($ext=="PNG" or $ext=="png") { $src_img1 = "imagecreatefrompng"; }
    if ($ext=="gif" or $ext=="GIF") { $src_img1 = "imagecreatefromgif"; }
    if ($ext=="jpg" or $ext=="JPG") { $src_img1 = "imagecreatefromjpeg"; }
    if ($ext=="jpeg" or $ext=="JPEG") { $src_img1 = "imagecreatefromjpeg"; }
         	
    
     $nom_fichier1="avatar$_SESSION[id_membre].$ext";
         	$nom1 = "$racine/$nom_fichier1";
    $size = getimagesize($filename); 
    $largeur="200"; 
    $hauteur="200"; 
    $src_img = $src_img1($filename);
    $racine = imagecreatetruecolor($largeur,$hauteur); 
    imagecopyresampled($racine, $src_img, 0, 0, 0, 0, $largeur, $hauteur,$size[0], $size[1]); 
    imagejpeg($racine,$nom1, 75);
    
    
    $nom_fichier1="avatar$_SESSION[id_membre].$ext";
         	$nom1 = "$racine/$nom_fichier1";
    $size = getimagesize($nom1); 
    $largeur="60"; 
    $hauteur="60"; 
    $src_img = $src_img1($nom1);
    $racine = imagecreatetruecolor($largeur,$hauteur); 
    imagecopyresampled($racine, $src_img, 0, 0, 0, 0, $largeur, $hauteur,$size[0], $size[1]); 
    imagejpeg($racine,$nom1, 75);
    }
    
    Merci par avance
     
  38. Leonick
    Leonick WRInaute accro
    Inscrit:
    8 Août 2004
    Messages:
    22 489
    J'aime reçus:
    0
    As-tu un message d'erreur qui s'affiche ? si non as-tu mis error_reporting(E_ALL) dans ton code ?
     
  39. extremenet
    extremenet WRInaute discret
    Inscrit:
    2 Octobre 2006
    Messages:
    169
    J'aime reçus:
    0
    oui

    les 2 derniere lignes du deuxieme code à la creation sont en defaut
    imagecopyresampled($racine, $src_img, 0, 0, 0, 0, $largeur, $hauteur,$size[0], $size[1]);
    imagejpeg($racine,$nom1, 75);
     
  40. lyonist
    lyonist WRInaute discret
    Inscrit:
    5 Août 2008
    Messages:
    213
    J'aime reçus:
    0
    fandecine est toujours mon préféré. Merci beaucoup, tes tutoriels sont toujours pratiques.
     
  41. tonguide
    tonguide WRInaute passionné
    Inscrit:
    28 Novembre 2003
    Messages:
    1 404
    J'aime reçus:
    0
    Je ne comprends pas trop pourquoi tu utilises un fichier à part (que tu appelles via <img>) pour générer tes images et que ensuite, tu appelles une URL pour (si j'ai bien compris) générer ton image qui sera donc visible uniquement de l'admin qui ajoute l'image (donc inutile dans l'absolu).

    Comme PHP n'exige pas qu'on visualise l'image pour la générer, pourquoi ne pas se contenter d'une fonction (ou mieux ... une class permettant de faire bien plus de chose qu'une simple redirection) qui la générerai sans avoir une page intermédiaire pour générer tes miniatures ? Bref inclure la génération de tes miniatures directement lors de ton traitement d'ajout de fiche de ciné.

    Et du coup, je comprend la remarque qui a suivit, concernant le file_exists.

    Sinon, pour le code, je ne vais pas m'amuser à dire : "tu pourrais faire ça plus proprement ..." on trouve toujours plus malin que soit.

    Sinon, une petite astuce (à prendre ou pas) qui permet à la fois de générer les photos à la volée et à la fois de garder l'image en cache navigateur serait de :
    1- Niveau HTML vous mettez une url avec un format fixe et identifiable. exemple : 150x120/votre-rewrite-125.jpg qui correspondrait à "largeur"x"hauteur"/"titre rewrite de l'image"-"id de l'image"."extension". Vous pourriez évidemment dire "mini" au lieu de "150x120".
    2- On suppose que la photo n'existe pas (miniature non faites). Forcement, on arrive sur une erreur 404. A ce moment là, on appel un fichier PHP (via .htaccess) qui fera le contrôle de l'url et après parse, si il est identifié que c'est une image, qu'elle existe en original, et qu'on demande tel ou tel taille (qui serait contrôlé pour éviter les pb avec les petits malins), on génère l'image, on l'enregistre au bon endroit et on l'affiche via header() ensuite, histoire de ne pas avoir d'image retournant une erreur lors de la première génération. (il va de soi que si ce n'est pas une image, on renvoi sa page 404 classique)
    3- Si elle existe (suite à la première création), aucun soucis, elle est affiché directement sans appel de PHP et donc il est parfaitement possible de gérer le cache navigateur, puisqu'en effet, cette image existe en dure sur votre serveur.

    Donc gros avantage, vous changez de taille, c'est totalement transparent pour vous comme pour le visiteur (si votre programme de miniature est bien géré, ça se voit pas). Et c'est aussi simple que de changer un bout de code dans votre code ensuite.

    Je l'ai moi-même testé sur 65 000 images suite à un changement de design où les miniatures devaient quasi doublé de taille et c'était bien pratique de ne pas se préoccuper de ça. (et sincèrement, les images pas encore miniaturisés s'affichées quasiment à la même vitesse que les autres).

    Sinon, je les génère en général également dans l'admin, parce que tout est automatisé et que c'est donc tout aussi simple.
     
  42. MichaelWestern
    MichaelWestern Nouveau WRInaute
    Inscrit:
    5 Avril 2012
    Messages:
    13
    J'aime reçus:
    0
    Merci pour toutes ces infos grave utile !!!
     
  43. shaozu21
    shaozu21 Nouveau WRInaute
    Inscrit:
    6 Juillet 2013
    Messages:
    8
    J'aime reçus:
    0
    Bonjour,

    Merci beaucoup mais malheuresement ça ne fonctionne pas chez moi :/
     
  44. gogonore
    gogonore Nouveau WRInaute
    Inscrit:
    18 Juin 2014
    Messages:
    3
    J'aime reçus:
    0
    domage qu'il n'y ai pas plus de fonction en php, car en aspirant les images du net, il est plaisant d'en recréer d'autres à 100% basé sur les effets.

    J'ai un peu testé et c'est quand même chouette