Ajouter des arrière-plans aux images en PHP

Question

Je travaille sur l'amélioration d'une de mes applications Facebook en permettant à l'utilisateur de télécharger une image et d'appliquer une bordure de style ou un cadre (nuages, étoiles, ciel, etc.). L'utilisateur peut également enregistrer l'image, avec la bordure après qu'elle a été appliquée. Cela explique un peu mieux ce que je dois:

http://zbrowntechnology.info/ImgDisp/imgdisp.php 

Si vous avez d'autres questions ou avez besoin de plus de détails, s'il vous plaît laissez-moi savoir .. Je vais modifier ce poste.

Answer 1

utilisation imagecopy(). L'exemple sur cette page est fait en utilisant l'option de transparence avec imagecopymerge() mais je ne pense pas que vous en ayez besoin.

En utilisant imagecopy(), vous spécifiez les coordonnées X/Y à utiliser pour le positionnement:

imagecopy($borderimage, $topimage, 20, 20, 0, 0, $width, $height);

Où $width et $height sera toute la largeur et la hauteur de l'image du haut. Vous devrez remplacer 20 et 20 par la mesure de la quantité d'image de bordure qui sera affichée autour des bordures. Vous devrez probablement redimensionner l'image supérieure aux dimensions exactes que vous voulez, ou bien elle pourrait chevaucher la bordure un peu trop loin vers la droite ou vers le bas. (Voir imagecopyresampled())

Edit:

Voici une façon grossière de faire tout le processus (en supposant chosenborder.png est la frontière qu'ils ont choisi, et uploadedimage.png est l'image qu'ils téléchargées Si c'est un type d'image différent que vous allez utiliser. le corresponding function).

$borderx = 20; // The width of our border 
$border = imagecreatefrompng("chosenborder.png"); 
$topimage = imagecreatefrompng("uploadedimage.png"); 
$bordersize = getimagesize($border); 
$topimagesize = getimagesize($topimage); 

/* The new dimensions of topimage. $borderx*2 means we account for 
    the border on both left and right, top and bottom. */ 
$newx = $bordersize[0] - ($borderx*2); 
$newy = $bordersize[1] - ($borderx*2); 
imagecopyresampled($topimage_scaled, $topimage, 0, 0, 0, 0, 
       $newx, $newy, $topimagesize[0], $topimagesize[1]); 

/* Merge the images */ 
imagecopy($border, $topimage_scaled, $borderx, $borderx, 
       0, 0, $width, $height); 
/* Output the image */ 
imagepng($border, "newimage.png"); 
/* Free up the memory occupied by the image resources */ 
imagedestroy($border); 
imagedestroy($topimage); 

Après que l'utilisateur télécharge leur image, trouver chosenborder.png et uploadedimage.png, exécutez le script ci-dessus, puis afficher newimage.png à l'utilisateur et vous êtes bon pour aller. Assurez-vous simplement d'appeler le imagedestroy() sur les ressources d'images temporaires ou ils vont perdre de la mémoire. Si vous ne voulez pas conserver l'image générée sur votre serveur, vous pouvez omettre le deuxième argument à imagepng() qui le fera envoyer les informations d'image directement comme une image au navigateur, auquel cas vous aurez envie pour écrire le correct image HTTP headers.

Answer 2

solution côté client en utilisant CSS3:

Commander la propriété CSS3 border-image (doesnt répondre à l'exigence de sauver l'img à la frontière)

solution côté serveur en fusionnant 2 images différentes:

<?php 


$imgFile = 'img.jpg'; 
$brdFile = 'brd.jpg'; 
$img = addBorder($imgFile,$brdFile); 
outputImage($img); 

function addBorder($imgFile,$brdFile) 
{ 
    $img=imagecreatefromjpeg($imgFile); 
    $brd=imagecreatefromjpeg($brdFile); 

    $imgSize = getimagesize($imgFile); 
    $brdSize = getimagesize($brdFile); 


    //NOTE: the border img MUST be bigger then the src img 
    $dst_x = ceil(($brdSize[0] - $imgSize[0])/2); 
    $dst_y = ceil(($brdSize[1] - $imgSize[1])/2); 


    imagecopymerge ($brd, $img, $dst_x, $dst_y, 0, 0, $imgSize[0], $imgSize[1] ,100 ); 

    return $brd; 
} 

function outputImage($img) 
{ 
    header('Content-type: image/png'); 
    imagepng($img); 
} 

?>