php - jpGraph - 如何通过 POST 调用发送图像

Question

在客户端，有 jQuery 脚本将 POST 请求发送到 example.php。

$.post('example.php', function(data) {
    var $newImg = $('<img src="' + data + '"/>');
    $('#placeholder').html($newImg);
});

示例 PHP 应返回使用 base64_encode 编码的图像数据，但出现问题。这是 example.php 的一部分:

$contentType = 'image/png';
$gdImgHandler = $graph->Stroke(_IMG_HANDLER);
$image_data = $graph->img->Stream();

$str = "data:$contentType;base64," . base64_encode($image_data);
echo $str;
exit;

编辑:在客户端，不是图像而是很多字符:

我无法想象这里出了什么问题。我已经通过 POST 发送图像数据，但使用其他库。有人可以帮我解决这个问题吗？

EDIT2 看起来返回的图像数据中有>，所以它分为图像+自定义标签。看看这个: EDIT3:对不起，我犯了错误。我正在研究图表库，我错了，因为我在标题中发布了 PHPlot 有问题的内容，实际上我对 jpGraph 图表库有问题。再次对此表示抱歉。我仍然有解决方案，但对于 jpGraph。

EDIT4:如果我在 Orbit 的代码中尝试 Lightness Races:

$contentType = 'image/png';
$gdImgHandler = $graph->Stroke(_IMG_HANDLER);

ob_start();                        // start buffering
$graph->img->Stream();             // print data to buffer
$image_data = ob_get_contents();   // retrieve buffer contents
ob_end_clean();                    // stop buffer

echo "data:$contentType;base64;" . base64_encode($image_data);

我在浏览器中得到这个:

在 Firebug 中我看到了这个:

Answer 1

在你的 JavaScript 中

首先，您没有对数据进行HTML转义。显然，某些东西(可能是 / 字符，在 base-64 系统中是索引 63)正在关闭 img 标记，这就是为什么您会看到如此多的数据溢出进入周围的文本。

使用不需要您自己编写 HTML 而是直接操作 DOM 的技术:

$.post('example.php', function(data) {
    var $newImg = $('<img />');
    $newImg.attr('src', data);   // <----- just string, not HTML, input
    $('#placeholder').html($newImg);
});

<小时/>

在你的 PHP 中

此外，正如 @Cheeky 指出的那样 the manual's examples演示:

 $image_data = $graph->img->Stream();
 // ^                          ^
 // |                          + outputs image data
 // + nothing assigned

您不需要使用Stroke；这将允许您写入文件或获取 GD 句柄，但由于 GD 和 jpGraph 都不允许您直接获取图像缓冲区，因此这对您没有用。

因此，您必须编写一个解决方法。

你可以直接去:

<?php
$contentType = 'image/png';
$gdImgHandler = $graph->Stroke(_IMG_HANDLER);

echo "data:$contentType;base64,";  // print prefix
$graph->img->Stream();             // print data
?>

但是，这样做的问题是您的数据不再采用 Base-64 编码。 PHP 的 output buffering features将解决这个问题:

<?php
$contentType = 'image/png';
$gdImgHandler = $graph->Stroke(_IMG_HANDLER);

ob_start();                        // start buffering
$graph->img->Stream();             // print data to buffer
$image_data = ob_get_contents();   // retrieve buffer contents
ob_end_clean();                    // stop buffer

echo "data:$contentType;base64," . base64_encode($image_data);
?>

有点冗长，但 jpGraph 似乎没有内置的方法来解决这个问题。