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

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

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

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

2 ответа

Решение

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

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

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

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

Редактировать:

Вот грубый способ сделать весь процесс (при условии chosenborder.png это граница, которую они выбрали, и uploadedimage.png это изображение, которое они загрузили. Если это другой тип изображения, вы будете использовать соответствующую функцию).

$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() что заставит его отправлять информацию об изображении непосредственно в виде изображения в браузер, и в этом случае вы захотите написать правильные заголовки HTTP изображения.

Клиентское решение с использованием css3:

извлеките свойство border-image свойства css3 (не соответствует требованию сохранения img с рамкой)

Решение на стороне сервера путем объединения двух разных изображений:

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

?>
Другие вопросы по тегам