HTML/JavaScript/PHP：如何獲取網頁按鈕以使圖像在目錄中循環？

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/")); 
?> 

控制檯打印漂亮空看着XMLHttpRequest，我確信我徹底誤解了一些pri這些東西是如何相互關聯的，但直到昨天，我還沒有使用PHP的經驗，也沒有我能找到的資源告訴我如何實現這一點。

Answer 1

我以前的代碼片段丟失了;在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> 

我不會親自寫一個包括什麼本質上是代碼從服務器收穫文件的兩行，但您的特定情況下，你可能想要處理包含的所有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] => ex1_1 .png [1] => ex1_2.png [2] => 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(); 

從上面的代碼中，你可以得到JSON陣列狀 -

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

現在，使用和處理與您的代碼這個JSON數組。