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

Question

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

$.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 看起来返回的图片数据有＆gt;在它，所以它分为图像+自定义标签。看看这个： 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);

我在浏览器中得到这个：

在萤火虫中我看到了这个：

Answer 1

在您的Javascript中

首先，您不是HTML转义data。显然，某些东西 - 可能是/字符，它是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似乎没有内置的方法。

Answer 2

看起来您忘记使用Base64对其进行编码。数据字符串具有不应该采用Base64编码的符号。而且，具体来说，它没有data和其他部分。你确定从正确的脚本中得到它吗？ 或者Stream（）函数将图像文件内容直接输出到标准输出，而不是$ image_data变量。

尝试使用http://phplot.sourceforge.net/phplotdocs/EncodeImage.html

$image_data = $graph->EncodeImage('base64');

之后您不需要base64_encode。

ps：downvoter - 你在这里看不到明显的东西，想一想我在上面和评论中所写的内容。他的Stream（）（或其他东西）将PNG文件的内容输出回浏览器！ 这就是<img src='.PNG..显示PNG文件标题及其二进制内容的原因。

pps：如果你在谈论jGraph，那么你的代码应该是这样的（我没有在API中看到所需的功能，只有允许将图像保存到文件的例子）;

$contentType = 'image/png';
ob_start();
$graph->Stroke();
$image_data = ob_get_clean();

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

Answer 3

我做了Lightness所说的，但我必须改变以下内容才能发挥作用：

data:$contentType;base64;至data:$contentType;base64,

即逗号而不是分号。

Answer 4

这将返回GD资源：

$gdImgHandler = $graph->Stroke(_IMG_HANDLER);

延伸：

ob_start();
imagepng($gdImgHandler);
$image_data = ob_get_contents();
ob_end_clean();

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

当我在memcached中为统计信息base64编码缓存大图时，我使用此代码，所以我知道它正在工作。如果您不使用PNG，请将imagepng()替换为imagejpeg()或其他内容。