Question

我有一个像

这样的图像的目录

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

我编写了HTML和JavaScript来设置两个canvas元素，一个用于ex1_1.png，一个用于ex2_1.png，每个canvas元素都与一个按钮配对，这样当第一个被点击时画布使用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/"));
?>

控制台打印出一个非常空洞的XMLHttpRequest，我确定我完全误解了这些事情如何相互关联的原则，但直到昨天我还没有使用PHP的经验，也没有任何资源我找到了告诉我如何做到这一点。

Answer 1

我之前的片段丢失了;关闭后？＆gt;在javascript块中。对此疏忽感到抱歉。

我决定测试我的新解决方案，现在一切都很稳定。因为这个问题很复杂，只有足够的信息来解决早期问题。请将您的标题编辑为“从远程目录中的图像文件数组创建json字符串”或类似内容。如需支持以后的任何问题，请发布一个新的非复合问题。

我有一个名为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>

我不会亲自为从服务器收集文件的两行代码编写一个include，但对于您的特定情况，您可能还想处理include上的所有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图像数组：

数组（[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然后将它们写入画布吗？有没有理由你不能按原样使用它们并循环它们？似乎不必要的额外工作，但我再也没有所有的信息。我希望这足以解决您的问题，并帮助您推进您的项目。

Answer 2

您可以尝试使用此代码 -

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();

从上面的代码中，您可以获得{ - 1}}数组，如 -

JSON

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

HTML / JavaScript / PHP：如何获得一个Web按钮，使图像在目录中循环？

2 个答案: