Как лучше реализовать последовательный вывод изображений?
Добрый день!
В php отрисовывается картинка. В js функция эту картинку получает и выводит в div на экране. Вывод должен быть пошаговым, через паузу. Например рисует иероглиф, сначала первая черта, потом вторая и т.д.
Затык в выводе картинок на экран через паузу, все остальное работает.
Подскажите, как можно это реализовать? Node.js и ассинхронные функции не рассматриваю.
Код упростил до рисования круга.
$data = json_decode(file_get_contents("php://input"), true); $width = $data["width"]; $height = $data["height"]; $im = imagecreatetruecolor(400, 400); $red = imagecolorallocate($im, 0xCC, 0x00, 0x00); $white = imagecolorallocate($im, 0xFF, 0xFF, 0xFF); imagefill($im, 1, 1, $white); imageellipse($im, $width, $height, 80, 80, $red); ob_start(); imagepng($im); $imageData = ob_get_clean(); $imageData = base64_encode($imageData); $result['image'] = $imageData; header('Content-type: application/json'); echo json_encode($result); |
$data = json_decode(file_get_contents("php://input"), true); $width = $data["width"]; $height = $data["height"]; $im = imagecreatetruecolor(400, 400); $red = imagecolorallocate($im, 0xCC, 0x00, 0x00); $white = imagecolorallocate($im, 0xFF, 0xFF, 0xFF); imagefill($im, 1, 1, $white); imageellipse($im, $width, $height, 80, 80, $red); ob_start(); imagepng($im); $imageData = ob_get_clean(); $imageData = base64_encode($imageData); $result['image'] = $imageData; header('Content-type: application/json'); echo json_encode($result);
function sendData(wid,hei) { var data = { width: wid, height: hei, }; var xhr = new XMLHttpRequest(); xhr.open("POST", "Drawing.php", true); xhr.setRequestHeader("Content-Type", "application/json"); xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) { var result = JSON.parse(xhr.responseText); var img = new Image(); img.src = "data:image/jpeg;base64," + result.image; $('#myImg').empty(); document.getElementById("myImg").appendChild(img); } }; xhr.send(JSON.stringify(data)); } $('#anim').click(function(){ $('#myImg').empty(); sendData(200,50); sendData(200,200); sendData(200,360); }); |
function sendData(wid,hei) { var data = { width: wid, height: hei, }; var xhr = new XMLHttpRequest(); xhr.open("POST", "Drawing.php", true); xhr.setRequestHeader("Content-Type", "application/json"); xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) { var result = JSON.parse(xhr.responseText); var img = new Image(); img.src = "data:image/jpeg;base64," + result.image; $('#myImg').empty(); document.getElementById("myImg").appendChild(img); } }; xhr.send(JSON.stringify(data)); } $('#anim').click(function(){ $('#myImg').empty(); sendData(200,50); sendData(200,200); sendData(200,360); });
Вывод картинок по клику кнопки.
Пробовал использовать setTimeout(sendData, 2000, 200, 200) - происходит вывод сразу всех картинок в один момент после указанной паузы, по факту видна только последняя картинка.
Пробовал с использованием функции sleep:
function sleep(milliseconds) { const date = Date.now(); var currentDate = null; do { currentDate = Date.now(); } while (currentDate - date < milliseconds); } |
function sleep(milliseconds) { const date = Date.now(); var currentDate = null; do { currentDate = Date.now(); } while (currentDate - date < milliseconds); }
- выводит первую картинку и через паузу все остальные сразу (по факту видна только последняя).
Как вообще можно реализовать такой вывод картинок через паузу? Или сначала помещать все картинки в массив, а потом выводить стандартно через animation?
Дополнительно:
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для реализации последовательного вывода изображений на веб-странице с помощью PHP вы можете использовать цикл для перебора массива изображений и вывода их на страницу. Ниже приведен пример кода, демонстрирующий этот подход:
<?php $images = array("image1.jpg", "image2.jpg", "image3.jpg"); foreach ($images as $image) { echo '<img src="' . $image . '" alt="Image" />'; } ?>
В этом примере мы создаем массив $images, содержащий имена файлов изображений. Затем мы используем цикл foreach для перебора этого массива и вывода каждого изображения на страницу с помощью тега![]()
.
Если вы хотите добавить дополнительные атрибуты к изображениям, такие как ширина и высота, вы можете внести соответствующие изменения в код. Например:
"image1.jpg", "alt" => "Image 1", "width" => "100", "height" => "100"), array("src" => "image2.jpg", "alt" => "Image 2", "width" => "150", "height" => "150"), array("src" => "image3.jpg", "alt" => "Image 3", "width" => "200", "height" => "200") ); foreach ($images as $image) { echo '<img />'; } ?>
В этом примере каждое изображение представлено в виде ассоциативного массива с ключами src, alt, width и height. Мы используем эти ключи для вывода соответствующих атрибутов изображения.
Таким образом, вы можете легко реализовать последовательный вывод изображений на вашем сайте, используя PHP и простой цикл.