Javascript 如何使用jQuery将jpeg显示为由PHP文件返回的IMG标记的源属性
我必须承认,作为一个新手,我甚至不知道如何提问。不过,还是这样 背景: 我有一个用PHP编写的注册脚本,它使用安全代码生成PHP脚本,生成一个jpeg,直接作为图像加载,包含随机生成的字符串的图形表示,该字符串存储在cookie中,注册方必须输入该脚本以验证注册表单 目标: 我想创建自己的“刷新”代码,每当我按下“刷新”按钮时,该代码将调用安全代码生成脚本来创建和显示新的安全映像 以下是生成安全代码的脚本: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
$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@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
$('#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@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
�����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);
});