使用 AJAX 調用通過 PHP 顯示 base64 圖像數據

Question

我想使用 AJAX 調用渲染圖像，但我無法通過 PHP 從服務器以 base24 字符串形式返回圖像。

在下面的 renderImage 函數中，測試圖像數據“R0lGODlhCw...”顯示正確，但來自 AJAX 調用的圖像數據顯示不正確。

我想使用 AJAX 而不是僅僅將圖像文件內容輸出到 src 屬性中，因為我最終想向 PHP 文件添加授權標頭。

我想我遺漏了 PHP 文件中的某些內容和 ajax 調用中的一些標題？

PHP文件：image.php

<?php
header("Access-Control-Allow-Origin: *");
$id = $_GET["id"];
$file = '../../upload/'.$id;
$type = pathinfo($file, PATHINFO_EXTENSION);
$data = file_get_contents($file);
$base64 = 'data:image/' . $type . ';base64,' . base64_encode($data);
return $base64;
?>

JS

function renderImage(id) {
//return "R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==";
 return $.ajax({
    url: '[server URL]/image.php',
    data:{"id":id},
    type: 'GET',
  });
};

$('.feedImage').each(async function() {
  try {
    const res = await renderImage($(this).data("id"));
    $(this).attr("src","data:image/gif;base64," + res);
  } catch(err) {
    console.log("error"+err);
  }
});

從如何顯示我們通過 Ajax 調用收到的圖像獲得的原始圖像？

Answer 1

首先你應該修復你的 php 圖像渲染

<?php
header("Access-Control-Allow-Origin: *");
$id = $_GET["id"];
$file = '../../upload/'.$id;
$type = pathinfo($file, PATHINFO_EXTENSION);
$data = file_get_contents($file);
$base64 = 'data:image/' . $type . ';base64,' . base64_encode($data);
echo json_encode(array('id' => $base64));
?>

然后你的 javascript，因為你已經定義了數據圖像類型，所以不需要在 javascript 上重復它。

function renderImage(id) {
//return "R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==";
 return $.ajax({
    url: '[server URL]/image.php',
    data:{"id":id},
    type: 'GET',
  });
};

$('.feedImage').each(async function() {
  try {
    const res = await renderImage($(this).data("id"));
    $(this).attr("src", res);
  } catch(err) {
    console.log("error"+err);
  }
});