PHP : Création de thumbnail + coin rond + effet rollover

Description

Bonjour à tous !

J'ai créer une fonction qui permet de créer a partir de n'importe quelle image un thumbnail. Il y a beaucoup de script qui font cela. L'originalité de ma source est que la fonction créer un thumnail avec les coin ronds et un effet sur l'image lors d'un rollOver.

CARACTÉRISTIQUE
Coin rond / Coin carrer
Effet RollOver
Système de mise en cache
Compatible IE / Firefox
Génère un gif avec transparence pour laisser place à la couleur de fond de la page d'appel
Possibilité de ne pas spécifié la hauteur (ds ce cas un dedimensionnement proportionnel est effectué)

Source / Exemple :

function createThumbWithOver($img_src,$w_thumb,$h_thumb,$border=10,$radial=10,$alpha=50){
	
	$pic['destOver']['name'] = md5($img_src.$w_thumb.$h_thumb.$border.$radial.$alpha.'over'); // nom du fichier over
	$pic['destNormal']['name'] = md5($img_src.$w_thumb.$h_thumb.$border.$radial.$alpha); // nom du fichier normal
	
	$makePic = false; // variable pour vérifcation is on cré les images ou non
	// Routine pour vérifier si le fichier cache existe et si il est plus vieux que l'image d'origine
	if(file_exists('./temp/'.$pic['destNormal']['name'].'.gif') === true ){ // si le fihcier existe ?
		if(intval(filemtime($img_src)) > intval(filemtime('./temp/'.$pic['destNormal']['name'].'.gif'))){ // si le fichier cache est plsu vieux que le fichier source
			$makePic = true; // fichier source est plus récent donc il faut recréer les images
		}else{
			$makePic = false; // le fichier sourve est plsu vieux que le fichier cache donc on ne le recré pas
		}
	}else{
		$makePic = true; // si le fihcier cache n'existe pas il faut le créer
	}
	
	// Vérification de la variable , piour savoIr si on cré les images
	if($makePic === true){
		// Récupération des infos de l'image source
		list($pic['src']['info']['width'], $pic['src']['info']['height'], $pic['src']['info']['type'], $pic['src']['info']['attr']) = getimagesize($img_src);
		
		//On vérifie si le parametre de la hauteur est plsu grand que 0
		if($h_thumb == 0){ // si egal a zaro on affecte la hauteur proportionnellement 
			$h_thumb = floor($pic['src']['info']['height'] * $w_thumb / $pic['src']['info']['width']);
		}
		switch($pic['src']['info']['type']){
			case"1": $pic['src']['ress'] = imagecreatefromgif($img_src); break; // Création de l'image pour une source gif
			case"2": $pic['src']['ress'] = imagecreatefromjpeg($img_src); break; // Création de l'image pour une source jpg
			case"3": $pic['src']['ress'] = imagecreatefrompng($img_src); break; // Création de l'image pour une source png
		}
		
		$pic['destNormal']['ress'] = imagecreatetruecolor($w_thumb, $h_thumb); // On crée la miniature vide pour l'image Etat Normal
		$pic['destOver']['ress'] = imagecreatetruecolor($w_thumb, $h_thumb); // On crée la miniature vide pour l'image Etat Over
		
		// On crée la miniature Normal
		imagecopyresampled($pic['destNormal']['ress'], $pic['src']['ress'], 0, 0, 0, 0, $w_thumb, $h_thumb, $pic['src']['info']['width'], $pic['src']['info']['height']);
		// On crée la miniature Over
		imagecopyresampled($pic['destOver']['ress'], $pic['src']['ress'], 0, 0, 0, 0, $w_thumb, $h_thumb, $pic['src']['info']['width'], $pic['src']['info']['height']);
		
		// On commence à créer le masque pour le contour coin rond
		$pic['maskBorder']['ress'] = imagecreate($w_thumb, $h_thumb); // On crée le mask vide
		$pic['maskBorder']['green'] = imagecolorallocate($pic['maskBorder']['ress'], 0, 255, 0); // affectation de la couleur verte
		$pic['maskBorder']['pink'] = imagecolorallocate($pic['maskBorder']['ress'], 255, 0, 255); // affectation de la couleur rose
		// Ici on trace la zone à mettre en transparence avant le merge entre les 2 images
		// PRINCIPE : 4 cercle situé dans chauque coin avec un rayon de 2 fois la bordure
		// PRINCIPE : 1 forme polygonale de 8 coter pour peindre de rose la zone restante
		imagefilledellipse($pic['maskBorder']['ress'], $radial, $radial, $radial*2, $radial*2, $pic['maskBorder']['pink']); // cercle gauche supérieur
		imagefilledellipse($pic['maskBorder']['ress'], $w_thumb-$radial, $radial, $radial*2, $radial*2, $pic['maskBorder']['pink']); // cercle droite supérieur
		imagefilledellipse($pic['maskBorder']['ress'], $radial, $h_thumb-$radial, $radial*2, $radial*2, $pic['maskBorder']['pink']); // cercle gauche inférieur
		imagefilledellipse($pic['maskBorder']['ress'], $w_thumb-$radial, $h_thumb-$radial, $radial*2, $radial*2, $pic['maskBorder']['pink']); // cercle droit inférieur
		imagefilledpolygon ($pic['maskBorder']['ress'], array($radial,0,0,$radial,0,$h_thumb-$radial,$radial,$h_thumb,$w_thumb-$radial,$h_thumb,$w_thumb,$h_thumb-$radial,$w_thumb,$radial,$w_thumb-$radial,0), 8, $pic['maskBorder']['pink']); // forme géométrique à 8 coter
		imagecolortransparent($pic['maskBorder']['ress'], $pic['maskBorder']['pink']); // Applique la transparence à la couleur rose
		
		// On commence à créer le masque pour l'image over
		$pic['maskOver']['ress'] = imagecreate($w_thumb, $h_thumb); // On crée le mask vide
		$pic['maskOver']['white'] = imagecolorallocate($pic['maskOver']['ress'], 255, 255, 255); // On definis la couleur blanche
		$pic['maskOver']['pink'] = imagecolorallocate($pic['maskOver']['ress'], 0, 255, 0); // On definis la couleur blanche qui sera utilisé comme couleur de transparence 
		// Ici on trace la zone à mettre en transparence avant le merge entre les 2 images
		// PRINCIPE : 4 cercle situé dans chauque coin avec un rayon de 2 fois la bordure
		// PRINCIPE : 1 forme polygonale de 8 coter pour peindre de rose la zone restante
		imagefilledellipse($pic['maskOver']['ress'] , $border+$radial, $border+$radial, $radial*2, $radial*2, $pic['maskOver']['pink']); // cercle gauche supérieur
		imagefilledellipse($pic['maskOver']['ress'] , $w_thumb-($border+$radial), $border+$radial, $radial*2, $radial*2, $pic['maskOver']['pink']); // cercle droite supérieur
		imagefilledellipse($pic['maskOver']['ress'] , $border+$radial, $h_thumb-($border+$radial), $radial*2, $radial*2, $pic['maskOver']['pink']); // cercle gauche inférieur
		imagefilledellipse($pic['maskOver']['ress'] , $w_thumb-($border+$radial), $h_thumb-($border+$radial), $radial*2, $radial*2, $pic['maskOver']['pink']); // cercle droit inférieur
		imagefilledpolygon ($pic['maskOver']['ress'] , array($border+$radial,$border,$border,$border+$radial,$border,$h_thumb-($border+$radial),$border+$radial,$h_thumb-$border,$w_thumb-($border+$radial),$h_thumb-$border,$w_thumb-$border,$h_thumb-($border+$radial),$w_thumb-$border,$border+$radial,$w_thumb-($border+$radial),$border), 8, $pic['maskOver']['pink']); // forme géométrique à 8 coter
		imagecolortransparent($pic['maskOver']['ress'] , $pic['maskOver']['pink']); // Applique la transparence à la couleur rose
		
		// TRAITEMENT SUR L'IMAGE NORMAL
		imagecopymerge($pic['destNormal']['ress'], $pic['maskBorder']['ress'], 0, 0, 0, 0, $w_thumb, $h_thumb, 100); // copie du masque au dessus de la miniature avec une transparence (0%)
		// il faut enlever le vert pour que le fond soit transparent
		if($radial > 0){ // si le radial est de 0 alors ne pas appliquer la transparence parce que le pixel 0,0 n'est pas vert ce qui entraine une transparence sur les zones qui on la meme couleur que le pixel 0,0
			imagetruecolortopalette($pic['destNormal']['ress'], FALSE, 256); // conversion en palette 256 couleur 
			$pic['destNormal']['green'] = imagecolorat($pic['destNormal']['ress'], 0, 0); // affectation de la couleur verte (récupérer au pixel 0,0)
			imagecolortransparent($pic['destNormal']['ress'], $pic['destNormal']['green']); // Applique la transparence à la couleur verte
		}
		// On enregistre la miniature avec bordure coin rond
		imagegif($pic['destNormal']['ress'],'./temp/'.$pic['destNormal']['name'].'.gif');
		imagedestroy($pic['destNormal']['ress']);
		
		// TRAITEMENT SUR L'IMAGE OVER
		imagecopymerge($pic['destOver']['ress'], $pic['maskOver']['ress'], 0, 0, 0, 0, $w_thumb, $h_thumb, $alpha); // copie du masque au dessus de la miniature avec une transparence ($alpha)
		// Merge du masque du contour
		imagecopymerge($pic['destOver']['ress'], $pic['maskBorder']['ress'], 0, 0, 0, 0, $w_thumb, $h_thumb, 100); // copie du masque au dessus de la miniature avec une transparence ($alpha)
		// il faut enlever le vert pour que le fond soit transparent
		if($radial > 0){ // si le radial est de 0 alors ne pas appliquer la transparence parce que le pixel 0,0 n'est pas vert ce qui entraine une transparence sur les zones qui on la meme couleur que le pixel 0,0
			imagetruecolortopalette($pic['destOver']['ress'], FALSE, 256); // conversion en palette 256 couleur 
			$pic['destOver']['green'] = imagecolorat($pic['destOver']['ress'], 0, 0); // affectation de la couleur verte (récupérer au pixel 0,0)
			imagecolortransparent($pic['destOver']['ress'], $pic['destOver']['green'] ); // Applique la transparence à la couleur verte
		}
		// On enregistre la miniature over 
		imagegif($pic['destOver']['ress'],'./temp/'.$pic['destOver']['name'].'.gif');
		imagedestroy($pic['destOver']['ress']);
	}
	// Retourne les le code html / javascript pour afficher l'image et effectuer le rollOver / rollOut
	return 'src="./temp/'.$pic['destNormal']['name'].'.gif" onMouseOver="this.src=\'./temp/'.$pic['destOver']['name'].'.gif\'" onMouseOut="this.src=\'./temp/'.$pic['destNormal']['name'].'.gif\'"';
}

Conclusion :

INSTALLATION
Nécessite la librairie GD 2
Le dossier cache doit etres au meme niveau que l'appel du script... les droit d'acces doit aussi etre affecté au dossier (777)

LA FONCTION ACCEPTE 6 PARAMÈTRES
$img_src // Chemin vers l'image cible [OBLIGATOIRE]
$w_thumb // largeur de la thumbnail désiré [OBLIGATOIRE]
$h_thumb // hauteur de la thumbnail désiré [OBLIGATOIRE](POSSIBILITÉ DE METTRE 0 COMME VALEUR, DANS CE CAS UN REDIMENSIONNEMENT PROPORTIONNELLE EST EFFECTUÉ)
$border // Épaisseur de la bordure de l'effet over [OPTIONNEL][DEFAULT:10]
$radial // Rayon utilisé pour créer les coins ronds [OPTIONNEL][DEFAULT:10](Un rayon de 0 équivaut a aucun coin rond)
$alpha // Détermine le niveau de transparence de l'effet Over [OPTIONNEL][DEFAULT:50](100 aucune transparence / 0 transparence complète)

EXEMPLE D'UTILISATION:
<img <?php echo createThumbWithOver('couchersoleil.jpg',100,100); ?> style="cursor:pointer;">
<img <?php echo createThumbWithOver('couchersoleilgrey.jpg',100,100); ?> style="cursor:pointer;">
<img <?php echo createThumbWithOver('couchersoleil.gif',100,100); ?> style="cursor:pointer;">
<img <?php echo createThumbWithOver('img.jpg',100,100); ?> style="cursor:pointer;">
<img <?php echo createThumbWithOver('bleutree.jpg',400,100,10,0,50); ?> style="cursor:pointer;">

Télécharger le projet

Codes Sources

A voir également

Création de thumbnail + coin rond + effet rollover
Creation gencod - Forum Visual Basic 6
Effet miroir photo en ligne - Forum Visual Basic
Effet vitre illustrator - Forum Graphisme/design
Effet tampon illustrator - Forum Graphisme/design
Effet miroir horizontal d'une image bmp - Forum C / C++ / C++.NET

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Création de thumbnail + coin rond + effet rollover

Description

Source / Exemple :

Conclusion :

Codes Sources

A voir également

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Du même auteur (josh666)

ActiveElement avec Firefox

Qui est en ligne - temps presque réel - javascript et php

Système pour compter vos points lors de vos partie de fléchette

Utilitaire de debugage de tableau multidimentionnel

Source / Exemple :

Conclusion :

A voir également

Vous n'êtes pas encore membre ? inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Du même auteur (josh666)

ActiveElement avec Firefox

Qui est en ligne - temps presque réel - javascript et php

Système pour compter vos points lors de vos partie de fléchette

Utilitaire de debugage de tableau multidimentionnel

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !