Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/435.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 如何使用jQuery将jpeg显示为由PHP文件返回的IMG标记的源属性_Javascript_Php_Jquery_Html_Image - Fatal编程技术网

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

Javascript 如何使用jQuery将jpeg显示为由PHP文件返回的IMG标记的源属性,javascript,php,jquery,html,image,Javascript,Php,Jquery,Html,Image,我必须承认,作为一个新手,我甚至不知道如何提问。不过,还是这样 背景: 我有一个用PHP编写的注册脚本,它使用安全代码生成PHP脚本,生成一个jpeg,直接作为图像加载,包含随机生成的字符串的图形表示,该字符串存储在cookie中,注册方必须输入该脚本以验证注册表单 目标: 我想创建自己的“刷新”代码,每当我按下“刷新”按钮时,该代码将调用安全代码生成脚本来创建和显示新的安全映像 以下是生成安全代码的脚本: <?php $im = imagecreate(300,60) or die("

我必须承认,作为一个新手,我甚至不知道如何提问。不过,还是这样

背景: 我有一个用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;
}
结果显示在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@B0�AӥiQ\W����|k�#N՞� YgI��9~HY7&��nO�r�s�"�}*������5� �c��X��'*��f7��Ǩ�(�� (�� (�� (�� (�� (�� (�� (�� ������mt�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
$('#imgPic').html('');
我收到以下文件:

$('#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@B0�AӥiQ\W����|k�#N՞� YgI��9~HY7&��nO�r�s�"�}*������5� �c��X��'*��f7��Ǩ�(�� (�� (�� (�� (�� (�� (�� (�� ������mt�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

�����Yy?j��:U�/6@�D��.Z������O����0������3��7.��ե\��|C-���D y�]�h-ؑ)��#��ŏʼ��~����4.�M���*���,��*H��ޭ�7.��=�4.� Y����W���P�;���8Pp0���注册护士���Ѵ{8�������A{�_qh�1.�}��'�cg{i�ڥՕ�76�钆�Hpy~��� '�T����H�U�我�;מ�国安局�R�J�Ҧ�T� ^我�����%�UcvU���gnH�kѨxj�x���:L�J�#�;�ٝ���$�����/�%Oǿ��� ]�e^x���U����E��x��Q��如果
内容类型本身是图像类型,则无需打开ajax请求:

$('#refreshBtn').on('click', function(event) {
    $('#imgPic').attr('src', './createrandomizedimaged83r04.php?_=' + (new Date()).getTime());
});
但是,这不是post请求,因为默认情况下,
img
tag打开get请求


如果您真的需要通过post请求来实现这一点,我建议您使用期望base64内容的ajax请求


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

您可以使用
XMLHttpRequest()
fetch()
数据发布到服务器,并以
Blob
ArrayBuffer
的形式从服务器获取响应,可以使用
文件读取器
响应
将结果设置为
元素的
src
转换为
Blob URL
数据URI

jQuery.ajax()
jQuery.post()
没有将
.responseType
设置为
“blob”
“arraybuffer”
;或调用
.blob()
.arraybuffer()
,请参阅


使用
数据url
我可以问一下为什么要使用post要求吗?@DontVoteMeDown显然它会像验证码一样用于表单验证。@ibrahimmahrir确切地说,这是验证码类型的验证,但我应该如何使用数据url?@michalinator请看DontVoteMeDown回答的第二部分,它谈到了数据url。@ibrahimmahrir它刷新了吗如果您将url更改为同一个url,那么图像是什么?@ibrahimmahrir我已经测试过了,您的建议是有效的。@ibrahimmahrir只需在url后添加一个时间戳,然后再见缓存。他应该在它前面加一个
数据:image/jpeg;base64,
@michalinator,或者您可以添加
缓存:false
,jQuery会帮您完成。我一定会尝试的这个,现在不行。我会再打给你的。我要调查一下“让”关键字,因为我不知道它的功能是什么。我喜欢这个解决方案,但我认为比使用base64稍微复杂一点。@DontVoteMeDown可以将
数据URL
替换为
php
的返回值,并设置为
元素的
.src
。应答方法不需要调整现有的
php
code.
this.response
应该是
javascript
上的
Blob
对象“实际上,它似乎在为给定cookie的270秒时间帧生成相同的图片。当时间帧过期时,它成功加载新图片。我将检查我的代码生成脚本。”预期的结果是什么?解决了!我在谷歌上搜索了表单数据的.append()函数-我不知道,但怀疑是一个键值类型的函数将这些对添加到表单请求中。因为原始代码由:fd.append(“request”,“request”);我将其替换为:fd.append('refresh','refresh'));Ta dah!您的原始代码加载的图片很好,谢谢您的帮助。附言:我将查看每个人的答案,以收集尽可能多的信息。
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);

});