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

[fandecine]

... 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

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!

[itsme]

Mais là, c'est l'internaute qui est pénalisé car le poids de la petite image est le même que la grosse!

Tu as mal lu: je compresse a l'upload

[Tex]

ouais mais du coup la grosse image est moche

[itsme]

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

[Den-S]

un petit comparatif gd/netpbm : http://gallery.menalto.com/modules.php? ... file=index

2/5/2004 Note: This page is at least two years out of date. When it was originally written, GD2 was not available. Now that GD2 is available and offers better quality image manipulation we are working on integrating it into Gallery 2.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 !

[MagicManu]

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);

[TotoZeRigolo]

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

[gratonet]

Salut tlm,

Je suis nouveau ici alors me tapez pas dessus trop fort

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: Tout sélectionner

/*
** 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]

[alien7]

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

[fandecine]

Salut tlm,

Je suis nouveau ici alors me tapez pas dessus trop fort

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.

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?!

[zimounet]

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?

[fandecine]

alors zimounet! on ne lis pas le topic en entier?

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!

[Ron56]

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

[fandecine]

c'est pas trés compliqué!

Voici le script qui génére automatiquement la galerie d'images miniatures:

Code: Tout sélectionner

<?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: Tout sélectionner

<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.

[zimounet]

finalement, je me suis fait ma propre fonction, je la publierai si sa interresse quelqu'un.