Как разрезать изображение на части и склеить обратно из фрагментов, используя PHP и Ajax

В этой статье мы поработаем с изображениями и реализуем алгоритм разбиения картинки на части и сбор этих частей воедино как на сайте, так и в отдельный файл. Реализация на PHP  и Ajax.

Создадим файл с именем cut.php. Добавим следующие строки:

<?php
header('Content-Type: image/png');

В этом файле будет две функции: разрезания изображения и его сборки обратно. Разберем первую:

function imageCut()
{
    ini_set('memory_limit','500m');
    $src = ImageCreateFromPNG("031.png");
    $size_x = imageSX($src);
    $size_y = imageSY($src);
    $constant = 11;
    $cut_w = $size_x%$constant;
    $cut_h = $size_y%$constant;
    $size_x=$size_x-$cut_w;
    $size_y=$size_y-$cut_h;
    $size_x1 = 0;
    $size_y1 = 0;
    for ($i = 0; $i < $constant; $i++) {
        for ($j = 0; $j < $constant; $j++) {
            $im2[$i][$j] = imagecreatetruecolor($size_x / $constant, $size_y / $constant);
            imagecopy($im2[$i][$j], $src, 0, 0, $size_x1, $size_y1, $size_x / $constant, $size_y / $constant);
            imagePNG($im2[$i][$j], 'ram/' . $i . '-' . $j . '.png');
            $size_x1 = $size_x1 + ($size_x / $constant);
        }
        $size_y1 = $size_y1 + ($size_y / $constant);
        $size_x1 = 0;
    }
    imageUncut($size_x,$size_y,$constant);
    echo $constant.",".$size_x;
}

Для начала определим лимит памяти функцией ini_set(). Затем нам нужно получить исходное изображение для обработки. В этом примере оно уже будет лежать на сервере под именем 031.png.

Создадим переменную для его хранения, назовем $src. В переменные size_x и size_y получим ширину и высоту нашего изображения. Переменная $constant служит для хранения количества разрезов по горизонтали и вертикали, таким образом количество конечных изображений будет равно $constant^2.

Чтобы наше изображение разделилось на равные части, придется его обрезать. Вычислим сколько пикселей по горизонтали и вертикали нужно обрезать, получив остаток от деления ширины на количество разрезов в $cut_w и $cut_h. Переприсвоем ширину и высоту исходного изображения.

Переменные $size_x1 и $size_y1 будут хранить в себе координаты, необходимые для создания фрагмента изображения - его верхнюю левую точку. Начнем резать исходное изображение с самого верха слева направо. Для этого нам понадобится двойной цикл.

Создадим массив $im2[][] для хранения фрагментов исходного изображения. Функцией imagetruecolor() создадим фон для фрагмента с заданными шириной и высотой. Функцией imagecopy вырежем фрагмент из исходного изображения по заданным координатам size_x1 и size_y1, с вычисленной шириной и высотой, и поместим его в наш массив. Теперь сохраним полученный фрагмент в папку “ram” в формате «i-h.png».

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

Тут же вызовем функцию склейки, которую рассмотрим ниже. Через echo передаем данные о ширине исходного изображения и количестве разрезов в html страницу. Эта информация понадобится при сборке.

Разберем работу второй функции, собирающей фрагменты воедино:

function imageUncut($size_x, $size_y, $constant)
{
    $size_x1 = 0;
    $size_y1 = 0;
    $src = imagecreatetruecolor($size_x, $size_y);
    for($i = 0; $i < $constant; $i++) {
        for ($j = 0; $j < $constant; $j++) {
            $im2[$i][$j] = ImageCreateFromPNG('ram/' . $i . '-' . $j . '.png');
            imagecopy($src, $im2[$i][$j], $size_x1, $size_y1 , 0, 0, $size_x / $constant, $size_y / $constant);
            $size_x1 = $size_x1 + ($size_x / $constant);
        }
        $size_y1 = $size_y1 + ($size_y / $constant);
        $size_x1 = 0;
    }
    imagePNG($src,'final.png');
}

В эту функцию передаются высота и ширина исходного изображения, а также количество разрезов. Создаем фон для нашего готового изображения функцией imagetruecolor(). Двойным циклом выберем фрагменты из папки ram и занесем их в массив $im2. С помощью функции imagecopy будем вставлять фрагменты в наш фон $src, сдвигаясь по изображению как и в предыдущей функции.

В конце файла cut.php добавим строку:

imageCut();

…для того чтобы наша функция запустилась, при вызове этого файла

Отображать результат мы будем в html-страницу динамически с помощью Ajax. Создадим html-файл со следующим содержимым:

<html>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<body>
<script>
    $.ajax({
        type: 'POST',
        url: 'ajax/cut.php',
        success: function (data) {
            console.log(data);
            var i, temp, j, g=1;
            temp = data.split(',');
            var constant = temp[0];
            var width = temp[1];
            $('body').html('<div id="holst" style="width:'+width+'px;">');
            for(i=0; i < constant; i++) {
                for (j = 0; j < constant; j++) {
                    var d=document.createElement('div');
                    d.style.display = 'block';
                    d.style.float = 'left';
                    d.className='img'+g;
                    document.getElementById('holst').appendChild(d);
                    $(' .img'+g).html('<img class="img_cut'+g+'" style="float: left; display: block;" src="../../ajax/ram/' + i + '-' + j + '.png">');
                    g++;
                    if(j+1==constant) {
                        $('.img'+g).html("<br><br><br><br><br><br><br><br>");
                        d.style.float = 'none';
                    }
                }
            }
        }
    });
</script>
</body>
</html>

Примем данные о высоте и количестве разрезов из echo. Создаем блок div, в который будем собирать наше изображение из отдельных фрагментов. Прибавим к ширине 1 пиксель, чтобы все элементы влезли при сборке.

Собираем фрагменты как элементы img, генерируя каждому уникальное имя и перемещаясь вниз, когда количество фрагментов будет достигать правого края блока div. Таким образом, мы полностью построим на странице исходную картинку из отдельных фрагментов.

После выполнения скрипта, мы можем найти в папке проекта созданные фрагменты исходного изображения:

Также папке со скриптом мы обнаружим файл final.png, который собран обратно из этих фрагментов: