使用 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);
  }
});

从How to display an image that we received through Ajax call?获取的原始图像

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