Filtre image_superpose

Filtre qui superpose 2 images

Ce filltre superpose tout simplement une image sur une image source issue de la base de donnée de SPIP.

Avant

Après

Le code

Le code qui suit est à mettre dans votre fichier « mes_fonctions.php » (à créer s’il n’existe pas) :

// Filtre |image_superpose
 
function image_superpose($im, $masque, $pos="") {
	include_spip('inc/filtres_images');
 
	$numargs = func_num_args();
	$arg_list = func_get_args();
	$texte = $arg_list[0];
	for ($i = 1; $i < $numargs; $i++) {
		if ( ($p = strpos($arg_list[$i],"=")) !==false) {
			$nom_variable = substr($arg_list[$i], 0, $p);
			$val_variable = substr($arg_list[$i], $p+1);
			$variable["$nom_variable"] = $val_variable;
			$defini["$nom_variable"] = 1;
		}
	}
 
	$pos = md5(serialize($variable));
 
	$fonction = array('image_superpose', func_get_args());
	$image = image_valeurs_trans($im, "superpose-$masque-$pos", "png",$fonction);
	if (!$image) return("");
 
	$x_i = $image["largeur"];
	$y_i = $image["hauteur"];
 
	$im = $image["fichier"];
	$dest = $image["fichier_dest"];
 
	$creer = $image["creer"];
 
	if ($defini["right"] OR $defini["left"] OR $defini["bottom"] OR $defini["top"] OR $defini["text-align"] OR $defini["vertical-align"]) {
		$placer = true;
	}
	else $placer = false;		
 
	if ($creer) {
			$im = $image["fonction_imagecreatefrom"]($im);
 
			$masque = find_in_path($masque);
			$mask = image_valeurs_trans($masque,"");
 
			if (!is_array($mask)) return("");
			$im_m = $mask["fichier"];
			$x_m = $mask["largeur"];
			$y_m = $mask["hauteur"];
 
			// LES VALEURS PAR DEFAUT DES OPTIONS
 
			// opacite
			// Opacite de l'image (Valeurs: entre 0 et 100).
			if (!$defini["opacite"]) {
				$variable["opacite"] = 100;
			}
 
			// align_h
			// Alignment horizontal (Valeurs: 'left' | 'right' | 'center').
			if (!$defini["align_h"]) {
				$variable["align_h"] = "left";
			}
			// align_v
			// Alignment vertical (Valeurs: 'top' | 'bottom' | 'center').
			if (!$defini["align_v"]) { 
				$variable["align_v"] = "bottom";
			}
 
			// margin
			// Excentrage a partir du bord (Valeurs: en pixels).
			if (!$defini["margin"]) {
				$variable["margin"] = 10;
			}
 
			$im1 = $mask["fonction_imagecreatefrom"]($masque);
 
			// On force le fait de garder la transparence du fichier meme si c'est un png (peut etre n'est ce pas necessaire)
			if ($mask["format_source"] == ("gif"  || "png") AND function_exists('ImageCopyResampled')) {
				$im1_ = imagecreatetruecolor($x_m, $y_m);
				// Si un GIF est transparent,
				// fabriquer un PNG transparent
				// Conserver la transparence
				if (function_exists("imageAntiAlias")) imageAntiAlias($im1_,true);
				@imagealphablending($im1_, false);
				@imagesavealpha($im1_,true);
				@ImageCopyResampled($im1_, $im1, 0, 0, 0, 0, $x_m, $y_m, $x_m, $y_m);
				imagedestroy($im1);
				$im1 = $im1_;
			}
 
			if ($im1) {
				$superpose_y = $variable["margin"];
				if ($variable["align_v"] == 'top') {
						$superpose_y = $variable["margin"];
				}
				elseif ($variable["align_v"] == 'bottom') {
					$superpose_y = $y_i - $y_m - $variable["margin"];
				}
				elseif ($variable["align_v"] == 'center') {
					$superpose_y = (int)($y_i / 2 - $y_m / 2);
				}
 
				$superpose_x = $variable["margin"];
				if ($variable["align_h"] == 'left') {
					$superpose_x = $variable["margin"];
				}
				elseif ($variable["align_h"] == 'right') {
					$superpose_x = $x_i - $x_m - $variable["margin"];
				}
				elseif ($variable["align_h"] == 'center') {
					$superpose_x = (int)($x_i / 2 - $x_m / 2);
				}
			imagecopymerge($im,$im1, $superpose_x, $superpose_y, 0, 0, $x_m, $y_m, $variable["opacite"]);
			imagedestroy($im1);
		}
		$image["fonction_image"]($im, "$dest");
			imagedestroy($im);
		}
	$x_dest = largeur($dest);
	$y_dest = hauteur($dest);
 
	return image_ecrire_tag($image,array('src'=>$dest,'width'=>$x_dest,'height'=>$y_dest));
}

Utilisation

Dans un squelette placez le code qui suit :

[(#FICHIER|image_superpose{votre_image.png, align_v=top,align_h=right,opacite=50})]

Les options

 :

  • align_v : top | center | bottom : alignement vertical de l’image superposée par rapport à l’image originale
  • align_h : left | center | right : alignement horizontal de l’image superposée par rapport à l’image originale
  • opacite : niveau d’opacite de l’image superposée (de 0 à 100)
  • margin : marge autour de l’image superposée

Discussion

7 discussions

  • Bonjour,

    J’utilise image_superpose pour insérer un logo dans des photos après un image_reduire et avant de forcer le format de sortie en jpeg par image_format.

    En résumé simplifié, ça donne ceci :

    <img src="[(#FICHIER|image_reduire{...}|image_superpose{...}|image_format{jpg}|extraire_attribut{src})]" />

    Le hic c’est que mon site contient à peu près 100,000 photos faisant en moyenne 100 à 150ko, donc le volume total ne devrait pas dépasser 12Go environ, hors depuis que j’utilise cette fonction, le cache image de SPIP fait déjà 63Go et continue de grossir. Je me demande donc s’il n’y aurait pas un bug dans la gestion du cache, peut-être au niveau des images intermédiaires que se passent les filtres et qui ne seraient jamais supprimées. Quelqu’un a-t-il déjà constaté ce phénomène et surtout quelqu’un a-t-il une solution ?

    D’avance merci pour vos réponses !
    Nicolas

    Répondre à ce message

  • 5

    J’ai le même problème.

    En y regardant de plus près, le filtre utilise la fonction PHP imagecopymerge qui, en réalité, ne gère pas la transparence des PNG, contrairement à ce qu’affirme la docu.

    Sur cette page http://php.net/manual/fr/function.imagecopymerge.php, il y a le code d’une fonction imagecopymerge_alpha que j’ai recopié ci-dessous :

    function imagecopymerge_alpha($dst_im, $src_im, $dst_x, $dst_y, $src_x, $src_y, $src_w, $src_h, $pct){
        if(!isset($pct)){
            return false;
        }
        $pct /= 100;
        // Get image width and height
        $w = imagesx( $src_im );
        $h = imagesy( $src_im );
        // Turn alpha blending off
        imagealphablending( $src_im, false );
        // Find the most opaque pixel in the image (the one with the smallest alpha value)
        $minalpha = 127;
        for( $x = 0; $x < $w; $x++ )
        for( $y = 0; $y < $h; $y++ ){
            $alpha = ( imagecolorat( $src_im, $x, $y ) >> 24 ) & 0xFF;
            if( $alpha < $minalpha ){
                $minalpha = $alpha;
            }
        }
        //loop through image pixels and modify alpha for each
        for( $x = 0; $x < $w; $x++ ){
            for( $y = 0; $y < $h; $y++ ){
                //get current alpha value (represents the TANSPARENCY!)
                $colorxy = imagecolorat( $src_im, $x, $y );
                $alpha = ( $colorxy >> 24 ) & 0xFF;
                //calculate new alpha
                if( $minalpha !== 127 ){
                    $alpha = 127 + 127 * $pct * ( $alpha - 127 ) / ( 127 - $minalpha );
                } else {
                    $alpha += 127 * $pct;
                }
                //get the color index with new alpha
                $alphacolorxy = imagecolorallocatealpha( $src_im, ( $colorxy >> 16 ) & 0xFF, ( $colorxy >> 8 ) & 0xFF, $colorxy & 0xFF, $alpha );
                //set pixel with the new color + opacity
                if( !imagesetpixel( $src_im, $x, $y, $alphacolorxy ) ){
                    return false;
                }
            }
        }
        // The image copy
        imagecopy($dst_im, $src_im, $dst_x, $dst_y, $src_x, $src_y, $src_w, $src_h);
    } 

    J’ai ajouté cette fonction dans mes_fonctions.php

    et dans le filtre image_superpose, j’ai remplacé l’appel de la fonction imagecopymerge par imagecopymerge_alpha

    Cela règle une partie des problèmes de transparence mais pas tous (voir mon post suivant)

    • Comme je le disais, il me semble qu’il y a d’autres bugs dans le filtre image_superpose.

      J’essaie de transformer un logo en :

      1. appliquant un masque circulaire ne conservant que le centre du logo au centre d’un cercle. le reste de l’image est transparente. J’utilise le filtre image_masque

      2. puis sur cette image masquée, je superpose un cercle me permettant de réaliser un bord circulaire avec un jeu d’ombre.

      L’idée est d’obtenir un logo circulaire avec les bords de l’image transparents, le logo étant entourée d’une bordure dont on voit l’ombre (semi-transparence de gris).

      L’image en sortie de 1. est correcte. Mais bizarrement, en sortie de 2. (image_superpose) c’est comme si j’avais rentré l’image initiale sans masque. C’est incompréhensible.

      Si quelqu’un peut m’aider...

    • J’ai trouvé la solution :

      après :

      $im = $image["fonction_imagecreatefrom"]($im);

      Cette ligne appelle la fonction imagecreatefrompng

      il faut ajouter ensuite :

      imagealphablending($im, true) ;
      imagesavealpha($im, true) ;

    • Bonjour

      Pourrais tu partager ta solution STP ? j’ai essayé de le faire en SPIP 2.1.8 mais cela ne fonctionne pas

      J’ai bien essayé d’appliquer tes correctifs, mais j’ai d’horrible bordure noires qui s’affichent.

      Merci.

    • Alors abandonnez tout....installez ce plugin http://zone.spip.org/trac/spip-zone/browser/_plugins_/fonctions_images?rev=44280 Sur une 2.1.8 je l’ai installé et jai remplacé image_superpose par image_merge dans mon squelette et ca fonctionne !! :)

    • par contre ne sait pas comment rendre le masque plus grand !

    Répondre à ce message

  • 1

    Je tente un image_superpose après un image_recadre...

    [(#FICHIER|image_recadre{1920,1080,left top}|image_superpose{#CHEMIN{images/mon_image.png},align_h=right,margin=0})]

    Mais il ne se passe rien...

    Répondre à ce message

  • Bonjour,
    Je travaille sous spip 2.0.9 et j’ai des soucis de transparence avec ce filtre. En effet, si j’utilise des png24 ou gif avec des transparences pour l’image qui vient se superposer, le filtre remplace les transparences par du noir. Y a-t-il un moyen de faire en sorte que les parties transparentes de l’image superposer le reste ?
    Ceci est notamment dans l’objectif d’utiliser des png 24 générés par |image_typo afin de les superposer à une image de fond (par exemple : le titre d’un article en superposition avecon logo... dans un mail, donc sans de z-index).
    Merci.

    Répondre à ce message

  • J’ai rajouté ce filtre (corrigé pour la transparence PNG) au plugin fonctions image.

    Répondre à ce message

  • 3

    Bonjour,
    Merci pour ce filtre qui semblait correspondre à mes besoins. Malgré mes essais, je n’obtiens aucun résultat. Où placer le fichier .png ? Merci

    • J’ai mis le fichier png dans le répertoire dist ; sur mon site test, ça semble fonctionner.

      Eric

    • ça marche impec si tu met l’adresse squelette/img/image.png. Par contre j’arrive pas à faire marcher la transparence. Quelqu’un à une idée ?

    • J’ai supprimé la partie :
      // On force le fait de garder la transparence du fichier meme si c'est un png (peut etre n'est ce pas necessaire)

      Et avec une image PNG avec transparence (pas alpha, juste une couleur transparente), ça marche.

    Répondre à ce message

  • 2

    Bonjour,

    Merci pour cette contrib qui correspond en partie à mon besoin.
    Juste une remarque : j’ai l’impression que pour que cela fonctionne, le fichier a superposer doit se trouver dans le répertoire dist (est-ce du à la fonction find_in_path ?)

    Enfin, un regret : Tout comme la fonction écrire par Xavier (http://xebiaut.free.fr/spip.php?article201), c’est dommage que celle ci ne s’applique que au type < img| xxx > et non < doc | xxx > . J’ai essayé sans succès d’adapter ces fonctions ... Peut-être aurez vous une piste ?

    Eric

    • <img> et <doc> sont des modeles... ce ne sont pas des fonctions

      Il suffit de modifier ces modeles en conséquence

    • Bonjour,

      Je serai très intéressé si vous pouviez me dire comment faire pour avoir ce résultat avec le <IMG>.

      Je ne suis pas très fort et j’ai des auteurs qui n’ont aucune compétence. Le fait de leur demander de télécharger l’image les panique.

      Merci,
      Abou33

    Répondre à ce message

Ajouter un commentaire

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom

Dernière modification de cette page le 1er avril 2010