Как лучше реализовать последовательный вывод изображений?

JavaScript

1 ответ

Добрый день!
В 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 &amp;&amp; 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 &lt; milliseconds); 	}

function sleep(milliseconds) { const date = Date.now(); var currentDate = null; do { currentDate = Date.now(); } while (currentDate - date < milliseconds); }

- выводит первую картинку и через паузу все остальные сразу (по факту видна только последняя).
Как вообще можно реализовать такой вывод картинок через паузу? Или сначала помещать все картинки в массив, а потом выводить стандартно через animation?

Дополнительно:

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь

Лучший ответ

Дмитрий К. Ответ

Для реализации последовательного вывода изображений на веб-странице с помощью PHP вы можете использовать цикл для перебора массива изображений и вывода их на страницу. Ниже приведен пример кода, демонстрирующий этот подход:

&lt;?php
$images = array(&quot;image1.jpg&quot;, &quot;image2.jpg&quot;, &quot;image3.jpg&quot;);
 
foreach ($images as $image) {
    echo &#039;<img src="' . $image . '" alt="Image" />';
}
?&gt;

<?php $images = array("image1.jpg", "image2.jpg", "image3.jpg"); foreach ($images as $image) { echo '<img src="' . $image . '" alt="Image" />'; } ?>

В этом примере мы создаем массив $images, содержащий имена файлов изображений. Затем мы используем цикл foreach для перебора этого массива и вывода каждого изображения на страницу с помощью тега .

Если вы хотите добавить дополнительные атрибуты к изображениям, такие как ширина и высота, вы можете внести соответствующие изменения в код. Например:

 "image1.jpg", "alt" =&gt; "Image 1", "width" =&gt; "100", "height" =&gt; "100"),
    array("src" =&gt; "image2.jpg", "alt" =&gt; "Image 2", "width" =&gt; "150", "height" =&gt; "150"),
    array("src" =&gt; "image3.jpg", "alt" =&gt; "Image 3", "width" =&gt; "200", "height" =&gt; "200")
);
 
foreach ($images as $image) {
    echo '<img />';
}
?&gt;

"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 и простой цикл.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий Отменить ответ

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 1 ответ Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 1 ответ печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 1 ответ Аккумуляторные батареи Почему при зарядке автостарта слышен писк, где искать причину? 0 ответов

Как лучше реализовать последовательный вывод изображений?

Дополнительно:

комментарий Отменить ответ

Вам также может быть интересно

Ежедневно, круглосуточно