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


X

Как разрезать изображение на части и склеить обратно из фрагментов, используя 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, который собран обратно из этих фрагментов:

 

exp1 Просмотров сегодня +5 20 июня 2017
Ещё пока нет комментариев, будь первым!
Оставить комментарий
   🔔 Отдохните не много, может Вам будет интересно прочитать статьи пользователей нашего сайта.

Как на AJAX передать переменные в PHP с выводом результата в блок с проверкой условий без перезагрузки страницы

Как создать модуль онлайн консультации с использованием чата на ajax и php

Тег code - это отображение программного кода

Как на MVC с помощью PHP и MySQL создать счетчик просмотров страниц

Работа с БД на MVC создание модели и выполнение SQL запросов. Часть Вторая

Тег dd - это определение термина

Ограничение символов вводимых в текстовое поле на JavaScript

Создание профиля или личного кабинета пользователя на MVC, PHP и SQL

В какие каталоги добавить свой сайт бесплатно

Как на MVC при помощи PHP создать регистрацию с хешированием пароля

Как на MVC и PHP создать систему восстановления доступа с отправкой пароля на адрес электронной почты

Безопасная авторизация пользователей на MVC и PHP

Конструкторы Ugears купить в Иркутске от 690 руб. с Доставкой!
Реклама UGEARS это путешествие в удивительную атмосферу гармонии природы и совершенства конструкторской мысли
Конструктор Навигатор дат - 690 руб.
Конструктор Комбайн - 2990 руб.
ugears-irk.ru
Оплата и Доставка Контакты
Стоматология в Улан-Удэ | ДентаВита | Шок цены от 100 руб!
Реклама От всей нашей семьи хотим выразить огромную благодарность стоматологической клинике
Осмотр, консультация от 150 руб.
Рентгеновский снимок от 100 руб.
dentavita03.ru
Наши цены Отзывы
Создание сайтов и мобильных приложений от 5 500 руб. Любой сложности!
Реклама Собственный фреймворк. Большие и сложные проекты. ТОП 100 разработчиков РФ.
Создание сайтов от 5 500 руб.
Мобильные приложения от 50 000 руб.
irogex.ru
Наши проекты Контакты
Реклама помогает поддерживать
и развивать наш сервис.


Подробнее
(ссылка откроется в новой вкладке)
  Реклама