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

WRInaute passionné
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.
 
WRInaute occasionnel
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
 
WRInaute occasionnel
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);
?>
 
WRInaute passionné
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.
 
WRInaute occasionnel
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à
 
WRInaute impliqué
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
 
WRInaute impliqué
e-kiwi a dit:
lol ca s'appelle l'open source ...

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.
 
WRInaute passionné
dreamclic a dit:
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à

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).
 
Nouveau WRInaute
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
 
WRInaute occasionnel
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))
 
WRInaute impliqué
... 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 :)
 
WRInaute passionné
itsme a dit:
... 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! :wink:
 
WRInaute impliqué
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
 
Nouveau WRInaute
spijoelx a dit:
Den-S a dit:
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
:p

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
 
WRInaute discret
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);
 
Nouveau WRInaute
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
 
Nouveau WRInaute
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]
 
Nouveau WRInaute
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
 
WRInaute passionné
Re: Re images

gratonet a dit:
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.

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:
 
WRInaute passionné
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?
 
WRInaute passionné
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
 
WRInaute occasionnel
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:
 
WRInaute passionné
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
 
WRInaute occasionnel
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
 
Nouveau WRInaute
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
 
WRInaute passionné
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
 
WRInaute occasionnel
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+
 
WRInaute impliqué
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
 
WRInaute impliqué
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:
 
WRInaute discret
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
 
WRInaute discret
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);
 
WRInaute passionné
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.
 
Nouveau WRInaute
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
 
Discussions similaires
Haut