使用AJAX从PHP获取PNG图像

Question

我有一个PHP脚本，它计算时间序列数据中的下一个值，并将其作为PNG图像绘制到图形中。我将通过AJAX提供此数据，PHP将创建PNG图像。现在，如何从PHP获得生成的PNG图像作为AJAX响应？代码如下：

PHP：

<?php

$data = json_decode($_POST['data']);
// Some code to calculate the next value in this series
plotRenderRegression( $polynomialRegression, $coefficients, 0, 11 , $colorMap[ "Blue" ] ); 

header( "Content-Type: image/png" ); 
echo imagePNG( $image ); 
?>

JS：

$.post({
    dataType: "image/png",
    url: "predict.php",
    data: {
        sent: true,
        data: "[[1,0.63151965],[2,0.58534249],[3,0.43877649],[4,0.2497794],[5,0.07730788],[6,0.08980716],[7,0.11196788],[8,0.19979455],[9,0.4833865],[10,0.9923332]]"
    },
    success: function (img) {
        console.log(img)
        i = new Image();
        i.src = img;
        console.log(img);
        $("#imgdiv").prepend(i);
    },
    error: function (error, txtStatus) {
        console.log(txtStatus);
        console.log('error');
    }
});

控制台输出：

�PNG


IHDRX�Ao�NPLTE������00�������000������������333MMMfff���������������vD���IDATx��][��*�*>���o���$ ?$[��ɑq� Ι�����������2������Fp�;D33������c���وeĪF�iO̮H�����r*3'���[N
o~p#���X��ˀ���ub��T�X�,���׽���q�.�R��}� �]��#æy����l}�
}:U���,�����'�w�W_�0S9ԡ�wl�0�עOfTc8qw��9,=�s����7��^��h�U�1b-��?��鎿G����Ag��}����7Gg��GY���R��4y�   LE����8'o�  �+L>A��ʻ�e�hry��سد�끷�j����`#�����)ժϜΟc-)_ck���  ���=2�W�rY�X�gY]���1�H�T�3�*�]'�V�T̼t$���ྑN��&�K���%qp�cuf���2}8����`�PA'VF%6�PoC-6!���ky����8䪏U�:������,�Ƌ�
�9Uby���W�
���共�  .....

我在这里做错了什么？

更新1：

我已经按如下方式更改了JS代码，但它仍然得到一个损坏的图像

success: function (data) {
    $('#imgdiv').html('<img src="data:image/png;base64, ' + btoa(unescape(encodeURIComponent(data))) + '" />');
} 

Answer 1

您不能将SRC设置为映像本身。你可以通过两种方式来解决这个问题：

1-创建一个临时文件，并在PHP文件中返回指向该临时文件的链接

2- base64对PNG进行编码并将其传递给src，就像您当前所做的那样。

在这两种情况下，您可能必须丢弃jQuery的"dataType“过滤器，才能将响应解释为成功。

最终的超文本标记语言示例(通过JavaScript Ajax设置src)：

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNby // blAAAADElEQVQImWNgoBMAAABpAAFEI8ARAAAAAElFTkSuQmCC />"

<img src="data:image/png;base64,[base64_encoded_png_goes_here] />"