HTML/JavaScript/PHP:如何获得Web按钮以使图像通过目录循环

Question

我的目录带有

之类的图像

/Web/ex1_1.png
/Web/ex1_2.png
/Web/ex2_1.png

我已经编写了HTML和JavaScript来设置两个帆布元素，一个用于ex1_1.png，一个用于ex2_1.png，每个帆布元素与按钮配对，以便在第一个单击时单击帆布擦除并与ex1_2.png重新绘制。我希望在下一次点击中，以使程序意识到序列中没有下一个图像，而是循环回到开始，ex1_1.png。我在解决此问题的其他方法方面没有成功，因此我现在尝试将PHP扫描目录并提供文件列表。但是，我不明白如何使PHP发送JavaScript信息。在我的JavaScript文件中，我包括了

javascript

var req = new XMLHttpRequest();
req.open("get", "../php/request.php", true);
req.send()
console.log(req);

我有一个名为request.php

的PHP文件

php

<?php
    echo json_encode(scandir("../Web/"));
?>

控制台打印看起来很空白，看上去很空，我敢肯定我对这些事物之间的关系有彻底误解，但是直到昨天我一直没有PHP的经验，我都无法找到任何资源我如何完成此操作。

Answer 1

您可以尝试此代码 -

php（request.php）

$files = scandir("../Web/");
$pngOrJpg = [];
foreach ($files as $key => $value) {
    if (stripos($value,'.jpg') || stripos($value,'.png')) {
        $pngOrJpg[] = $value;
    }
}
echo json_encode($pngOrJpg);

注意：仅获取.jpg和.png类型图像数组。

javascript

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
       console.log(xhttp.responseText);
    }
};
xhttp.open("GET", "../php/request.php", true);
xhttp.send(); 

从上面的代码中，您可以获取JSON数组，例如 -

['ex1_1.png','ex1_2.png','ex2_1.png']

现在，使用您的代码使用并操纵此JSON数组。

Answer 2

我以前的摘要缺少；结束后？＆gt;在JavaScript块中。对不起那个监督。

我决定测试我的新解决方案，现在一切都很扎实。因为这个问题是复合的，并且只提供了足够的信息来解决早期问题。请将您的标题编辑为" <strong"之类的内容，从远程目录中的图像文件数组创建一个JSON字符串>'>＆quot;或类似。有关以后任何问题的支持，请发布一个新的非混合问题。

我有一个名为canvaswriter.php的文件：

<?php
/* *** Server structure used during testing:
/test
    /folder
        canvaswriter.php
        request.php
    /Web
        ex1_1.png
        ex1_2.png
        ex2_1.png
*** */  
$path="../Web/";
include("request.php");
?>
<script type="text/javascript">
    var images=<?php echo json_encode($pngs); ?>;
    console.log(images);
</script>

我不会亲自为从服务器收集文件的两行代码编写包含，但是对于您的特定情况，您可能还需要处理包含的所有JavaScript。我不知道其余的魔术要在哪里发生。

这是request.php：

<?php
echo "Build array of .png images from directory files:<br>";
//$files=array_diff(scandir($path),array('..','.'));    // no filetype filter
chdir($path);   // set correct directory for glob()
$pngs=glob("*.png"); // with filename pattern filter
print_r($pngs);
?>

页面将显示：

从目录文件中构建.png图像的数组：

array（[0] =＆gt; ex1_1.png [1] =＆gt; ex1_2.png [2] =＆gt; ex2_1.png）

源代码将显示：

Build array of .png images from directory files:<br>
Array (
    [0] => ex1_1.png
    [1] => ex1_2.png
    [2] => ex2_1.png
) 
<script type="text/javascript">
    var images=["ex1_1.png","ex1_2.png","ex2_1.png"];
    console.log(images);
</script>

和控制台将显示：

["ex1_1.png", "ex1_2.png", "ex2_1.png"]

最后，我不明白您为什么将这些图像写给画布。您是否将这些.png图像转换为base64，然后将它们写入画布？您是否有这样的原因，您不能将它们作为IS并循环？似乎是不必要的额外工作，但我又没有所有信息。我希望这能充分解决您的问题并帮助您继续进行项目。