Сгенерированное изображение на php вывести на страницу без перезагрузки

@StivinKing · Регистрация: 21.12.2012

Студворк — интернет-сервис помощи студентам

Доброго времени суток,

Проблема в том, что не могу созданное на php изображение вывести на страницу.

Подробнее:
Ситуация у меня следующего характера.

Имеется страница, на которой можно произвести конфигурацию фрактала "ковер Серпинского" (ну это не по сути не важно). По клику на кнопке "Применить" проверяются данные, и если все хорошо --> данные отправляются в php файл, где по заданным параметрам создается изображение.

Когда был чистый php, все было довольна таки легко.
просто:

HTML5
1
<img src="fractal.php" />

Сама генерация на php, может кому пригодится:

Кликните здесь для просмотра всего текста

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
if($_SERVER['REQUEST_METHOD'] == 'POST'){
    $i = $_POST['iteration']; // Количество итераций
    $xy = $_POST['size']; // Размер стороны картинки
 
    $img = imagecreatetruecolor($xy, $xy);
 
    $frame = imagecolorallocate($img, 0, 0, 0); //цвет рамки
    $field = imagecolorallocate($img, 0, 0, 0); //цвет удаленного квадрата
 
    $bg = imagecolorallocatealpha($img, 255, 255, 255, 0); //цвет фона
 
    //Зададим цвет фона
    imagefilledrectangle($img, 0, 0, $xy - 1, $xy - 1, $bg);
    //Зададим рамку фона
    imagerectangle($img, 0, 0, $xy - 1, $xy - 1, $frame);
 
    drawCarpet(0, 0, $xy, $xy, $i);
    function drawCarpet($a, $b, $c, $d, $n) {
        global $img, $bg, $frame, $field;
 
        if($n <= 0) return;
 
        $a1 = 2 * $a / 3 + $c / 3;
        $c1 = $a / 3 + 2 * $c / 3;
        $b1 = 2 * $b / 3 + $d / 3;
        $d1 = $b / 3 + 2 * $d / 3;
 
        imagefilledrectangle($img, $a1, $b1, $c1, $d1, $field);
 
        drawCarpet($a, $b, $a1, $b1, $n - 1);
        imagerectangle($img, $a, $b, $a1, $b1, $frame);
        drawCarpet($a1, $b, $c1, $b1, $n - 1);
        imagerectangle($img, $a1, $b, $c1, $b1, $frame);
        drawCarpet($c1, $b, $c, $b1, $n - 1);
        imagerectangle($img, $c1, $b, $c, $b1, $frame);
        drawCarpet($a, $b1, $a1, $d1, $n - 1);
        imagerectangle($img, $a, $b1, $a1, $d1, $frame);
        drawCarpet($c1, $b1, $c, $d1, $n - 1);
        imagerectangle($img, $c1, $b1, $c, $d1, $frame);
        drawCarpet($a, $d1, $a1, $d, $n - 1);
        imagerectangle($img, $a, $d1, $a1, $d, $frame);
        drawCarpet($a1, $d1, $c1, $d, $n - 1);
        imagerectangle($img, $a1, $d1, $c1, $d, $frame);
        drawCarpet($c1, $d1, $c, $d, $n - 1);
        imagerectangle($img, $c1, $d1, $c, $d, $frame);
    }
 
    header('Content-Type: image/png');
    imagepng($img);
}
?>

Корявый код на jquery

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
if($('#iteration').val() != '' && $('#size').val() != '' && !$('#err_size').hasClass('has-error') && !$('#err_it').hasClass('has-error')){
    var msg = $("#f_form").serialize();
    $.ajax({
        type: 'POST',
        url: 'fractal.php',
        data: 'iteration=' + $('#iteration').val() + '&size=' + $('#size').val(),
        success: function(html){
            $('#dv #img').attr('src', html);
            console.log(html);
        }
    });
}

Добавлено через 47 минут
Сам спросил, сам ответил

В общем сделал кодирование

PHP
1
2
3
4
5
6
7
ob_start();
imagepng($img);
$contents =  ob_get_contents();
ob_end_clean();
 
$img_str = base64_encode($contents);
echo '<img src="data:image/jpg;base64,'.$img_str.'" />';

Весь код на PHP (вдруг кому понадобиться)

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<?php
//Принимаем данные
$i = $_POST['iteration']; // Количество итераций
$xy = $_POST['size']; // Размер стороны картинки
 
$img = imagecreatetruecolor($xy, $xy);
 
$frame = imagecolorallocate($img, 0, 0, 0); //цвет рамки
$field = imagecolorallocate($img, 0, 0, 0); //цвет удаленного квадрата
 
$bg = imagecolorallocatealpha($img, 255, 255, 255, 0); //цвет фона
 
//Зададим цвет фона
imagefilledrectangle($img, 0, 0, $xy - 1, $xy - 1, $bg);
//Зададим рамку фона
imagerectangle($img, 0, 0, $xy - 1, $xy - 1, $frame);
 
drawCarpet(0, 0, $xy, $xy, $i);
function drawCarpet($a, $b, $c, $d, $n) {
    global $img, $bg, $frame, $field;
 
    if($n <= 0) return;
 
    $a1 = 2 * $a / 3 + $c / 3;
    $c1 = $a / 3 + 2 * $c / 3;
    $b1 = 2 * $b / 3 + $d / 3;
    $d1 = $b / 3 + 2 * $d / 3;
 
    imagefilledrectangle($img, $a1, $b1, $c1, $d1, $field);
 
    drawCarpet($a, $b, $a1, $b1, $n - 1);
    imagerectangle($img, $a, $b, $a1, $b1, $frame);
    drawCarpet($a1, $b, $c1, $b1, $n - 1);
    imagerectangle($img, $a1, $b, $c1, $b1, $frame);
    drawCarpet($c1, $b, $c, $b1, $n - 1);
    imagerectangle($img, $c1, $b, $c, $b1, $frame);
    drawCarpet($a, $b1, $a1, $d1, $n - 1);
    imagerectangle($img, $a, $b1, $a1, $d1, $frame);
    drawCarpet($c1, $b1, $c, $d1, $n - 1);
    imagerectangle($img, $c1, $b1, $c, $d1, $frame);
    drawCarpet($a, $d1, $a1, $d, $n - 1);
    imagerectangle($img, $a, $d1, $a1, $d, $frame);
    drawCarpet($a1, $d1, $c1, $d, $n - 1);
    imagerectangle($img, $a1, $d1, $c1, $d, $frame);
    drawCarpet($c1, $d1, $c, $d, $n - 1);
    imagerectangle($img, $c1, $d1, $c, $d, $frame);
}
 
ob_start();
imagepng($img);
$contents =  ob_get_contents();
ob_end_clean();
 
$img_str = base64_encode($contents);
echo '<img src="data:image/jpg;base64,'.$img_str.'" />';
?>

И вывод сделал в блок

JavaScript
1
2
3
4
5
6
7
8
$.ajax({
    type: 'POST',
    url: 'fractal.php',
    data: 'iteration=' + $('#iteration').val() + '&size=' + $('#size').val(),
    success: function(html){
        $('#dv').html(html);
    }
});

Новые блоги и статьи Все статьи Все блоги /
Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Рецензия / Мнение Это мой обзор планшета X220 с точки зрения школьника. Недавно я решила попытаться уменьшить свой. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .
От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .