在PHP中爲圖像添加樣式化背景

Question

我正在通過允許用戶上傳圖像並應用樣式邊框或框架（例如雲，星星，天空等）來改進我的一個Facebook應用。用戶還可以保存圖像，並在圖像應用後使用邊框。這說明好一點什麼，我需要：

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

如果您有任何疑問或需要更多資料，請讓我知道..我會編輯這個職位。通過使用CSS3

Answer 1

使用imagecopy()。該頁面上的示例是使用imagecopymerge（）的透明度選項完成的，但我不認爲你需要這樣做。

使用imagecopy的（），你會指定X/Y座標用於定位：

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

凡$width和$height將頂部圖像的整個寬度和高度。您需要將20和20替換爲測量邊框圖像在邊框周圍顯示的多少。您可能需要將頂部圖像調整爲所需的精確尺寸，否則它可能會與邊界稍微偏離右側或底部。 （見imagecopyresampled()）

編輯：

這裏有一個粗略的方式來完成整個過程（假設chosenborder.png是他們選擇的邊框，uploadedimage.png是他們上傳的圖片如果它是一個不同的圖像類型，你會使用。 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); 

用戶上傳自己的形象之後，發現chosenborder.png和uploadedimage.png，運行上面的腳本，然後顯示newimage.png給用戶，你是好去。只要確保你在臨時圖像資源上撥打imagedestroy()，否則他們會吃掉內存。

如果您不想將生成的圖像保留在服務器上，您可以省略第二個參數imagepng()，這將使圖像信息直接作爲圖像發送到瀏覽器，在這種情況下，您需要編寫correct image HTTP headers。

Answer 2

客戶端解決方案：

結賬的CSS3屬性border-image （這麼想的滿足節能與邊框的IMG的要求）通過合併

服務器端解決方案2個不同的圖像：

<?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); 
} 

?>