Javascript MEMO

[test10.html]
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Ajaxで画像取得</title>
</head>
<body>
<img id="img" style="width:200px;height:200px;">
<br>
<div id="story" style="width:300px;">
</div>
<table border=0>
<tr>
<td><a href="javascript:void(0);" id="back"><div id="btn1"><img id="img_back" style="width:50px;"></div></a></td>
<td style="width:200px;"> </td>
<td><a href="javascript:void(0);" id="forward"><div id="btn2"><img id="img_forward" style="width:50px;"></div></a></td>
</tr>
</table>
<input type="hidden" id="no" value=0>
<script>

</script>
</body>
</html>

[test10.php]
// ホスト名が特定の文字列で終わっているかチェックする
$host = $_SERVER['HTTP_HOST'];
$checkURL = "localhost";

if (substr($host, -strlen($checkURL)) !== $checkURL) 
{
    header("HTTP/1.1 403 Forbidden");
    exit("Forbidden");
}

// --- CORS 設定 ---
header("Access-Control-Allow-Origin: http://localhost");
header("Access-Control-Allow-Credentials: true");

//pageIndexはjsから受け取るように実装すること
// POSTされたJSONデータを取得
$json_data = file_get_contents("php://input");
$data = json_decode($json_data, true); // trueを指定すると連想配列としてデコードされる
 
// 受信したデータを検証（例）
if (!isset($data['no']) || !isset($data['lang'])) {
    echo json_encode(['status' => 'error', 'message' => 'データが不足しているか、形式が不正です。']);
    exit;
}

// 画像ファイルのパス
// 受信した配列データにアクセス
$pageIndex = $data['no'];
$lang = $data['lang'];
// 画像ファイル名を取得
$story="";
$story = storyText($lang, $pageIndex);

// JSONとして返す
header("Content-Type: application/json");
echo json_encode([
    'status' => 'success',
    'story' => $story
]);
exit;
//表示するストーリーテキスト
function storyText(int $lang,int $pageIndex):string
{
    $story="";
    $storyEn="";
    switch($pageIndex)
    {
        case 0:
            $story = "こんにちは";
            $storyEn = "Hello";
            break;
        case 1:
            $story = "おや、どうしたんだい？";
            $storyEn = "Hey, what's wrong?";
            break;
        case 2:
            $story = "お腹へっちゃって";
            $storyEn = "I'm hungry";
            break;
        case 3:
            $story = "野菜はどう？";
            $storyEn = "What about vegetables?";
            break;
        case 4:
            $story = "それは、ちょっと";
            $storyEn = "That's a bit";
            break;
        case 5:
            $story = "あぁ、そういえばこれ拾ったんだった。\n（どんぐりを差し出す）";
            $storyEn = "Ah, that reminds me, I picked this up. \n (Hands over the acorn)";
            break;
        case 6:
            $story = "いいの？\nありがとう";
            $storyEn = "Is that okay?\nThank you";
            break;
        case 7:
            $story = "どういたしまして\n(こうしてくまさんは森へ帰っていきました。)";
            $storyEn = "You're welcome.\n(And so the bear returned to the forest.)";
            break;
    }
    return $lang==0?$story : $storyEn;
}

[getImage.php]
// CORS設定
header("Access-Control-Allow-Origin: http://localhost");
header("Access-Control-Allow-Credentials: true");

// POSTされたJSONデータを取得
$json_data = file_get_contents("php://input");
$data = json_decode($json_data, true);

// チェック
if (!isset($data['no'])) {
    header("HTTP/1.1 400 Bad Request");
    exit("Missing parameter");
}

$pageIndex = $data['no'];
$file = fileID($pageIndex);
$path = __DIR__ . "/" . $file;

if (!file_exists($path)) {
    header("HTTP/1.1 404 Not Found");
    exit("Image not found");
}

// MIMEタイプを取得して画像を返す
$finfo = finfo_open(FILEINFO_MIME_TYPE);
$mime  = finfo_file($finfo, $path);
finfo_close($finfo);

header("Content-Type: $mime");
readfile($path);
exit;

function fileID(int $pageIndex): string {
    switch($pageIndex) {
        case 0: return "nawmin_sample2.png";
        case 1: return "nawmin_sample4.png";
        case 2: return "nawmin_sample2.png";
        case 3: return "nawmin_sample5.png";
        case 4: return "nawmin_sample2.png";
        case 5: return "nawmin_sample3.png";
        case 6: return "nawmin_sample2.png";
        case 7: return "nawmin_sample4.png";
        default: return "nawmin_sample2.png";
    }
}

[test10.html]
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Get images with Ajax</title>
</head>
<body>
<img id="img" style="width:200px;height:200px;">
<br>
<div id="story" style="width:300px;">
</div>
<table border=0>
<tr>
<td><a href="javascript:void(0);" id="back"><div id="btn1"><img id="img_back" style="width:50px;"></div></a></td>
<td style="width:200px;"> </td>
<td><a href="javascript:void(0);" id="forward"><div id="btn2"><img id="img_forward" style="width:50px;"></div></a></td>
</tr>
</table>
<input type="hidden" id="no" value=0>
<script>

</script>
</body>
</html>

[test10.php]
// Check if the host name ends with a specific string
$host = $_SERVER['HTTP_HOST'];
$checkURL = "localhost";

if (substr($host, -strlen($checkURL)) !== $checkURL) 
{
    header("HTTP/1.1 403 Forbidden");
    exit("Forbidden");
}

// --- CORS settings ---
header("Access-Control-Allow-Origin: http://localhost");
header("Access-Control-Allow-Credentials: true");

// Implement so that pageIndex is received from js
// Get the POSTed JSON data
$json_data = file_get_contents("php://input");
$data = json_decode($json_data, true); // Specify true to decode as an associative array
 
// Validate the received data (example)
if (!isset($data['no']) || !isset($data['lang'])) {
    echo json_encode(['status' => 'error', 'message' => 'Data is missing or the format is invalid.']);
    exit;
}

// Path to the image file
// Access the received array data
$pageIndex = $data['no'];
$lang = $data['lang'];
// Get the image file name
$story="";
$story = storyText($lang, $pageIndex);

// Return as JSON
header("Content-Type: application/json");
echo json_encode([
    'status' => 'success',
    'story' => $story
]);
exit;
// Story text to be displayed
function storyText(int $lang,int $pageIndex):string
{
    $story="";
    $storyEn="";
    switch($pageIndex)
    {
        case 0:
            $story = "こんにちは";
            $storyEn = "Hello";
            break;
        case 1:
            $story = "おや、どうしたんだい？";
            $storyEn = "Hey, what's wrong?";
            break;
        case 2:
            $story = "お腹へっちゃって";
            $storyEn = "I'm hungry";
            break;
        case 3:
            $story = "野菜はどう？";
            $storyEn = "What about vegetables?";
            break;
        case 4:
            $story = "それは、ちょっと";
            $storyEn = "That's a bit";
            break;
        case 5:
            $story = "あぁ、そういえばこれ拾ったんだった。\n（どんぐりを差し出す）";
            $storyEn = "Ah, that reminds me, I picked this up. \n (Hands over the acorn)";
            break;
        case 6:
            $story = "いいの？\nありがとう";
            $storyEn = "Is that okay?\nThank you";
            break;
        case 7:
            $story = "どういたしまして\n(こうしてくまさんは森へ帰っていきました。)";
            $storyEn = "You're welcome.\n(And so the bear returned to the forest.)";
            break;
    }
    return $lang==0?$story : $storyEn;
}

[getImage.php]
// CORS settings
header("Access-Control-Allow-Origin: http://localhost");
header("Access-Control-Allow-Credentials: true");

// Get the POSTed JSON data
$json_data = file_get_contents("php://input");
$data = json_decode($json_data, true);

// Check
if (!isset($data['no'])) {
    header("HTTP/1.1 400 Bad Request");
    exit("Missing parameter");
}

$pageIndex = $data['no'];
$file = fileID($pageIndex);
$path = __DIR__ . "/" . $file;

if (!file_exists($path)) {
    header("HTTP/1.1 404 Not Found");
    exit("Image not found");
}

// Get MIME type and return the image
$finfo = finfo_open(FILEINFO_MIME_TYPE);
$mime  = finfo_file($finfo, $path);
finfo_close($finfo);

header("Content-Type: $mime");
readfile($path);
exit;

copy

[test7.html(javascript)]
const b1 = document.getElementById("btn1");
const b2 = document.getElementById("btn2");
let pageIndex=0;
let pageMax=8;
displayScreen();
buttonDisplay(pageIndex);
//戻る
b1.addEventListener("click", () => 
{
	//画像を表示する
	//ストーリーを表示する
	//ボタンの表示有無
	pageIndex--;
	if(pageIndex < 0) pageIndex = 0;
	displayScreen();
	buttonDisplay(pageIndex);
});
//進む
b2.addEventListener("click", () => 
{
	pageIndex++;
	if(pageIndex >= pageMax)pageIndex = pageMax - 1;
	displayScreen();
	buttonDisplay();
});
function buttonDisplay()
{
	b1.style.visibility="visible";
	b2.style.visibility="visible";
	if(pageIndex==0)
	{
		b1.style.visibility="hidden";
	}
	if(pageIndex + 1 == pageMax)
	{
		b2.style.visibility="hidden";
	}
}
async function displayScreen() {
    let no = pageIndex;

    // ストーリー取得
    fetch("http://localhost/img/test10.php", {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ no: no, lang: 0 }),
    })
    .then(res => res.json())
    .then(data => {
        document.getElementById("story").innerText = data.story;
    });

    // 画像取得（Blobとして）
    fetch("http://localhost/img/getImage.php", {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ no: no }),
    })
    .then(res => res.blob())
    .then(blob => {
        const url = URL.createObjectURL(blob);
        document.getElementById("img").src = url;
    })
    .catch(err => console.error("画像取得失敗:", err));
}
displayImage("./img/back","img_back");
displayImage("./img/forward","img_forward");
function displayImage(d1,d2)
{
	fetch(d1)
	.then(response=>response.text())/*テキストデータとして取得*/
	.then(d=>{
		/*取得したBase64データを`img`の`src`に設定*/
		const i1=document.getElementById(d2);
		i1.src=d;
		/*画像の読み込みが完了したらコンソールにログを表示*/
		i1.onload=function(){
			/*console.log("画像の読み込みが完了しました");*/
		};
	})
	.catch(error=>{
		/*console.error("画像の取得に失敗しました",error);*/
	});
}

copy

const b1 = document.getElementById("btn1");
const b2 = document.getElementById("btn2");
let pageIndex=0;
let pageMax=8;
displayScreen();
buttonDisplay(pageIndex);
// Back
b1.addEventListener("click", () => 
{
    // Display the image
    // Display the story
    // Show/hide buttons
    pageIndex--;
    if(pageIndex < 0) pageIndex = 0;
    displayScreen();
    buttonDisplay(pageIndex);
});
// Forward
b2.addEventListener("click", () => 
{
    pageIndex++;
    if(pageIndex >= pageMax)pageIndex = pageMax - 1;
    displayScreen();
    buttonDisplay();
});
function buttonDisplay()
{
    b1.style.visibility="visible";
    b2.style.visibility="visible";
    if(pageIndex==0)
    {
        b1.style.visibility="hidden";
    }
    if(pageIndex + 1 == pageMax)
    {
        b2.style.visibility="hidden";
    }
}
async function displayScreen() {
    let no = pageIndex;

    // Get story
    fetch("http://localhost/img/test10.php", {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ no: no, lang: 0 }),
    })
    .then(res => res.json())
    .then(data => {
        document.getElementById("story").innerText = data.story;
    });

    // Get image (as Blob)
    fetch("http://localhost/img/getImage.php", {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ no: no }),
    })
    .then(res => res.blob())
    .then(blob => {
        const url = URL.createObjectURL(blob);
        document.getElementById("img").src = url;
    })
    .catch(err => console.error("Image acquisition failed:", err));
}
displayImage("./img/back","img_back");
displayImage("./img/forward","img_forward");
function displayImage(d1,d2)
{
    fetch(d1)
    .then(response=>response.text())/* Retrieve as text data */
    .then(d=>{
        /* Set the retrieved Base64 data to `img`'s `src` */
        const i1=document.getElementById(d2);
        i1.src=d;
        /* When image loading is complete, display log in console */
        i1.onload=function(){
            /*console.log("Image loading completed");*/
        };
    })
    .catch(error=>{
        /*console.error("Failed to retrieve image",error);*/
    });
}

HTTPレスポンスは「1つの形式」しか返せないため2つに分けて
画像とストーリーのテキストを実行しています。
例えば、phpで
readfile($path)と実行して画像ファイルのバイナリデータを出力しようとします。
そのあとに echo json_encode(...) でJSONテキストを出力しようとしても
ブラウザは最初のバイナリを「画像」として処理しようとするため
JSONは無視されるか、壊れたデータとなります。
これを防ぐためにも画像を表示するphpとストーリーを表示するphpに分けて処理をしています。

function buttonDisplay()

if(pageIndex==0)
ページの開始のケース
btn1(戻るボタン)を非表示にしています。
if(pageIndex + 1 == pageMax)
ページの最後のケース
btn2(進むボタン)を非表示にしています。

displayScreen()はjavascriptからphpに送信をして結果を受け取る関数です。

fetch("http://localhost/img/test10.php", {

ストーリーを受け取るためのフェッチをしています。

body: JSON.stringify({ no: no, lang: 0 }),

ここでは固定でlang([0]jp [1]en)を設定していますが、必要に応じて変更してください。

document.getElementById("story").innerText = data.story;

phpで準備したデータを受け取りdivタグ内に表示しています。

fetch("http://localhost/img/getImage.php", {

画像を取得するphpにフェッチしています。

body: JSON.stringify({ no: no }),

画像管理番号がわかればいいだけなのでnoのみを渡しています。

const url = URL.createObjectURL(blob);

バイナリデータとして受け取ったデータをBlobを画像として表示できるURLに変換しています。

document.getElementById("img").src = url;

受け取ったデータをsrcプロパティに設定して画像を表示しています。