Добавить стилизованные фоны к изображениям в PHP

Question

Я работаю над улучшением одного из своих приложений Facebook, позволяя пользователю загружать изображение и применять к нему стилизованную рамку или рамку (т. Е. Облака, звезды, небо и т. Д.). Пользователь также может сохранить изображение, с границей после его применения. Это объясняет немного лучше, что мне нужно:

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

Если у вас есть какие-либо другие вопросы или нужно больше информации, пожалуйста, дайте мне знать .. Я буду редактировать этот пост.

Answer 1

imagecopy() использования. Пример этой страницы выполняется с использованием опции прозрачности с imagecopymerge(), но я не думаю, что вам это нужно.

Использование imagecopy(), вы будете указать X/Y координаты, чтобы использовать для позиционирования:

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

$width Где и $height будет вся ширина и высота верхнего изображения. Вы захотите заменить 20 и 20 на измерение того, какая часть изображения границы будет отображаться по границам. Вам, вероятно, придется изменить размер верхнего изображения на точные размеры, которые вы хотите, иначе он может перекрывать границу слишком далеко справа или снизу. (См imagecopyresampled())

Edit:

Вот грубый способ сделать весь процесс (при условии 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:

Checkout свойство CSS3 border-image (dosen't отвечают требованиям сохранения 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); 
} 

?>