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