Обрезка изображений на PHP

В данном уроке я расскажу и покажу Вам, как можно реализовать обрезку изображения выделенного фрагмента средствами PHP, что может пригодиться, например, для создания миниатюр изображений. Перед тем, как мы продолжим дальше рассматривать урок, хочу посоветовать еще одну обрезку изображений на JQuery, в которой все будет выполняться динамическим образом.

Для того, чтобы выделить нужный нам участок картинки, используем jQuery UI плагин – Draggable. HTML-код будет состоять из контейнера, в котором будет исходное изображение, а также перемещаемый блок, расположенный поверх изображения, который и послужит для выбора нужного фрагмента. HTML-код проиллюстрирован ниже.

<div class="wrapp">
       <img src="img/img.jpg">
                <div class="selector">
                          <div class="shadow-top"></div>
                          <div class="shadow-right"></div>
                          <div class="shadow-bottom"></div>
                          <div class="shadow-left"></div>
                          <div class="handle"></div>
                  </div>
</div>

Как Вы могли заметить, внутри нашего блока-селектора также расположено еще шесть блоков, из которых первые четыре предназначены для эффекта затемнения вокруг выбираемой области. Пятый же будет ограничивать область захвата, поскольку для эффекта затемнения используются дочерние элементы, которые расположены вне блока-селектора.

Эффект затемнения достигается благодаря следующим стилям:

.shadow-top, .shadow-right, .shadow-bottom, .shadow-left{
         width:500px;
         height:500px;
         position:absolute;
         background:rgba(0, 0, 0, 0.5);
         cursor:auto;
}

.shadow-top{
         bottom:100%;
         left:0;
}

.shadow-right{
         left:100%;
         top:0;
}

.shadow-bottom{
         top:100%;
         right:0;
}
 
.shadow-left{
         right:100%;
         bottom:0;
}

Далее рассмотрим подключение плагина к нашим HTML объектам:

$('.selector').draggable({

         // ограничение перемещения в пределах
         // родительского элемента
         containment: 'parent',

         // дочерний элемент представляющий
         // область захвата
         handle: '.handle'
});

Последней частью разработанного фронтэнда будет отправка координат селектора серверу для обрезки изображения.

$('button').on('click', function(event){

         $.ajax({
                   type: 'post',
                   url: 'crop.php',
                   data:  top='+$('.selector').position().top
+'&left='+$('.selector').position().left,

// в результате обновляем превью на странице
                   success: function(data){
                            $('.small').html(data);
                   }
         });
});

Для обработки изображений в PHP предусмотрена библиотека GD. Нам понадобится всего несколько функций из этой библиотеки:

/* создание специальных объектов
из исходного изображения
и подготовка для создания нового */   
$src = imagecreatefromjpeg('./img/img.jpg');
$dest = imagecreatetruecolor(150, 150);

// копирование области из исходного изображения
// в предварительно созданный объект
imagecopy ( $dest, $src, 0, 0,  $_POST['left'] ,
 $_POST['top'], 150 , 150 );

// удаление предыдущей «версии» миниатюры
unlink('./img/small.jpg');

// сохранение результирующего изображения в файл
imagejpeg($dest, './img/small.jpg');

// отчистка памяти от созданных объектов
imagedestroy($src);
imagedestroy($dest);

// отправка обновленного изображения
echo "<img src='./img/small.jpg'>";

На этом урок окончен. Благодарю за внимание!