如何使用jQuery将jpeg显示为由PHP文件返回的IMG标记的源属性

Question

我必须承认，作为一个新手，我甚至不知道如何问我的问题。不过，这就是问题所在。

上下文:我有一个用PHP编写的注册脚本，它使用安全代码生成PHP脚本，它生成的jpeg是直接加载为图像，包含随机生成的字符串的图形表示，这是存储在cookie中，并必须由注册方输入，以验证注册表。

目标:我想创建我自己的“刷新”代码，它将调用安全代码生成脚本，在每次我按下“刷新”按钮时创建并显示一个新的安全图像。

以下是安全代码生成脚本：

<?php

$im = imagecreate(300,60) or die("Cannot initialize new GD Image stream"); // identyfikator zasobu
$backgroundcolor = imagecolorallocate( $im, 225, 225, 225 );
$textcolor = imagecolorallocate( $im, 0, 0, 0 );
imagefilledrectangle($im, 0, 0, 140, 30, $backgroundcolor);


if( isset($_POST['refresh']) )
{
    if( isset($_COOKIE['randomimage']) )
        unset($_COOKIE['randomimage']);

    $randomizedString = createRandomString();
    imagestring( $im, 100, 65, 20, $randomizedString, $textcolor );
    setcookie('randomimage', $randomizedString, time() + 270 );
}
else if ( !isset($_COOKIE['randomimage'] ) )
{
    $randomizedString = createRandomString();
    imagestring( $im, 100, 65, 20, $randomizedString, $textcolor );

    setcookie('randomimage', $randomizedString, time() + 270 );
}
else
{
    $image_string = $_COOKIE['randomimage'];
    imagestring( $im, 100, 65, 20, $image_string, $textcolor );


}

header("Content-type: image/jpeg");
imagejpeg($im);
imagedestroy($im);


function createRandomString()
{
    srand( (double) microtime() * 1000000 );

    $letters_capital = range('A', 'Z');
    $letters_small = range('a', 'z');
    $number = range(0,9);

    $chars = array_merge($letters_capital, $number, $letters_small );

    shuffle($chars);

    $randString = "";

    for ( $i = 0; $i < 10; $i++ )
    {
        $randString .= $chars[$i] . " ";
    }

    return $randString;
}

?>

以下是jQuery代码，注册脚本的一部分：

$('#refreshBtn').on('click', function(event){
        $.post(
            "./createrandomizedimaged83r04.php",           // action
            {                                   // data
               refresh: "refresh"
            },
            function(data)                      // callback
            {


                $('#imgPic2').attr('src',data);


            }
        );

    });

结果如下所示显示在firefox控制台中：

GET http://***directory***/%EF%BF%BD%EF%BF%BD%EF%BF%BD%EF%BF%BD 

在这一点上，我怀疑，虽然我可能没有使用正确的术语，但我试图将图像的某种二进制表示推到img的src中，这会导致胡言乱语。

相反，在jQuery部分中，我编写了以下代码：

$('#imgPic').html('<img src=\'' + data +'\'>');

我得到了如下的服务：

�����Yy?j��:U�/6@�d��.z������O����0������3��7��ե\��|C-���D y�]�h-ؑ)��#��ŏʼ��~����4�m���*���,��*H��ޭ�7��=�4� Y����w���p�;���8Pp0���rN���Ѵ{8�������A{�_qh�1�}��'�cg{i�ڥՕ�76�gd�Hpy~��� '�T����H�U�I�;מ�nSa�R�J�Ҧ�t� ^I�����%�UcvU���gnH�kѨxj�x���:L�J�#�;�ٝ���$�����/�%Oǿ��� ]�e^x���u����e��x��q��FFA9կ<���д_�h���b������Z�&���e�@.0W 79����Q_�kJ���-!��c��bV@B0�AӥiQ\W����|k�#N՞� YgI��9~HY7&��nO�r�s�"�}*������5� �c��X��'*��f7��Ǩ�(�� (�� (�� (�� (�� (�� (�� (�� ������mt�4�Ta|�Wluc��y�袀3uh���>�����*�\�$�$�, �I�ޯAV�G$Pġ#�5 ��`ڤ�� �����~�m�L�4^la��G\�a��9��V�o�١�g�����g�����ny�L��Ps��A

我到底该如何获取由PHP代码生成脚本传递的图像并使用jQuery来显示它？

这是图像应该放到的地方(在注册脚本中)：

<table align='left' border='0' cellspacing='0' cellpadding='4' width='100%'>
<tr>
    <td align='center' colspan='2' id='imgPic' name='imgPic'><img id='imgPic2' src='{$this->image_url}'></td>
</tr>
<tr>
    <td align='center' colspan='2' id='refreshBtn' name='refreshBtn'><input id='refreshBtn' name='refreshBtn' type='button' class='button' value='Refresh'></td>
</tr>
<tr align='center'>
    <td align='right' style='width:50%;'><span class='registration'><font style='color:#663300;'>Enter the above phrase:</font></span></td>
    <td align='left' style='width:50%;'><input type='text' id='wordVal' name='wordVal' autocompelte='off' maxlength='10' size='17'></td>
</tr>
<tr>
    <td align='center' colspan='2'><span id='orgWord'></span>
    <br>
    <span id='usrWord'></span></td>
</tr>

​

请帮我弄一下代码。此外，由于jQuery代码(在注册脚本中)向代码生成脚本发出POST请求，因此我想知道如何使用POST请求而不是GET来设置刷新的图像。

提前致以问候和感谢。

Answer 1

如果content-type本身是图像类型，则不需要打开ajax请求：

$('#refreshBtn').on('click', function(event) {
    $('#imgPic').attr('src', './createrandomizedimaged83r04.php?_=' + (new Date()).getTime());
});

但是，这不是post请求，因为img标记默认情况下会打开一个get请求。

如果您确实需要通过post请求来完成此操作，我建议您使用期望base64内容的ajax请求。

使您的PHP脚本生成一个base64图像(检查this post)，并将结果用作图像的src属性，就像您在javascript中所做的那样。

Answer 2

您可以使用XMLHttpRequest()或fetch()将数据POST到服务器，并以Blob或ArrayBuffer的形式从服务器获取响应，这些响应可以使用FileReader或Response转换为Blob URL或data URI，然后将结果设置为<代码>D10元素的<代码>D9。

jQuery.ajax()和jQuery.post()没有将.responseType设置为"blob"或"arraybuffer"或调用.blob()或.arrayBuffer()的默认选项，请参见Displaying pdf from arraybuffer。

let url;

$('#refreshBtn').on('click', function(event) {
  if (url) {
    URL.revokeObjectURL(url);
  }
  var fd = new FormData();
  fd.append("request", "request");
  var request = new XMLHttpRequest();
  request.open("POST", "./createrandomizedimaged83r04.php", true);
  request.responseType = "blob";
  request.onload = function() {     
                     url = URL.createObjectURL(this.response);           
                     $('#imgPic2').attr('src', url);
                   }
  request.onerror = function(e) {
                      console.log(e, this.responseText)
                    }
  request.send(fd);

});