В этой статье мы поработаем с изображениями и реализуем алгоритм разбиения картинки на части и сбор этих частей воедино как на сайте, так и в отдельный файл. Реализация на 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, который собран обратно из этих фрагментов:
Ещё пока нет комментариев, будь первым!