使用 AJAX 调用通过 PHP 显示 base64 图像数据

Question

我想使用 AJAX 调用渲染图像，但我无法通过 PHP.

从服务器返回图像作为 base24 字符串

在下面的 renderImage 函数中，测试图像数据 'R0lGODlhCw...' 显示正确，但来自 AJAX 调用的图像数据显示不正确。

我想使用AJAX而不只是将图像文件内容输出到src属性中，因为我最终想向PHP文件添加授权headers。

我想我在 PHP 文件中遗漏了一些东西，在 ajax 调用中遗漏了一些 headers？

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

使用 AJAX 调用通过 PHP 显示 base64 图像数据

Using an AJAX call to display base64 image data via PHP

javascript

php

ajax

jquery

base64