Ajouter arrière-plans à des images de style en PHP

Question

Je travaille sur l'amélioration de l'un de mes applications Facebook en permettant à l'utilisateur de télécharger une image et appliquer une bordure de style, ou le cadre de ce (à savoir les nuages, étoiles, ciel, etc.). L'utilisateur chould également être en mesure d'enregistrer l'image, à la frontière après qu'il a été appliqué. 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 message.

Answer 1

imagecopy () . L'exemple sur cette page est effectuée en utilisant l'option de transparence avec imagecopymerge () mais je ne pense pas que vous avez besoin que.

vous spécifiez les coordonnées X / Y à utiliser pour le positionnement de l'aide imagecopy ():

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

Où $width et $height sera la totalité de la largeur et de la hauteur de l'image supérieure. Vous voulez remplacer 20 et 20 à la mesure de la quantité de l'image frontière montrerez autour des frontières. Vous devrez probablement redimensionner l'image en haut aux dimensions exactes que vous voulez, ou bien il pourrait chevaucher la frontière un peu trop à droite ou en 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, vous allez utiliser le function correspondant ).

$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 que vous appelez imagedestroy() sur les ressources d'image temporaires ou ils vont manger de la mémoire.

Si vous ne souhaitez pas conserver l'image générée sur votre serveur, vous pouvez omettre le deuxième argument à imagepng() qui en fera envoyer les informations d'image directement comme une image au navigateur, auquel cas vous voulez écrire image correcte en-têtes HTTP .

Answer 2

solution côté client en utilisant CSS3:

Voir la propriété CSS3 frontière image (Doesnt satisfaire à 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);
}

?>