使用AJAX从PHP获取PNG图像

Getting a PNG image from PHP using AJAX

本文关键字：PNG 图像 获取 PHP AJAX 使用      更新时间：2023-09-26

我有一个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))) + '" />');
}

您不能将SRC设置为图像本身。你可以用两种方法来解决这个问题：

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

2-base64对PNG进行编码，并按照当前的方式将其传递给src。

在这两种方法中，您可能必须丢失jQuery的"dataType"过滤器，才能将响应解释为成功。

最终HTML的示例（通过JavaScriptAjax设置src）：

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

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

相关文章：