我有一个表单,我发布一些变量来制作图像(文本,填充,背景图像和文本位置)
<form id="form" action="img.php" method="post" name="form">
<label>text</label> <textarea name="text"></textarea>
<label>Author</label> <input name="author"></input>
<label>text padding</label> <input type="number" name="padding" min="10" max="200" value="30">
text-align:
<input type="radio" name="align" value="1"> left
<input type="radio" name="align" value="0" checked="yes"> center
<input type="radio" name="align" value="2"> right
<select name="background">
<option>- select image -</option>
<?php $range = range(0, 177);
foreach ($range as $key) { ?>
<option id="img" value="src/img<?php echo $key;?>.jpg">src/img<?php echo $key;?>.jpg</option>
<?php } ?>
</select>
<input class="btn btn-success" type="submit" value="submit"></input>
</form>
<div id="result"></div>
当我将这些变量发送到img.php文件时,脚本运行良好。我想在同一页面上进行实时修改,比如带有ajax的图像编辑器,但是当我运行这个脚本时
<script type="text/javascript">
$(document).ready(function(){
// loader
$().ajaxStart(function(){
$('#loading').show();
$('#result').hide();
}).ajaxStop(function(){
$('#loading').hide();
$('#result').fadeIn('slow');
});
// post submit values
$('#form').submit(function(){
// ajax
$.ajax({
type: 'POST',
url: $(this).attr('action'),
data: $(this).serialize(),
success: function(data) {
$('#result').html(data);
}
})
return false;
});
})
</script>
html文件出现此错误,我无法获取图像:
����JFIF��>CREATOR: gd-jpeg v1.0 (using IJG JPEG v80), default quality ��C $.' ",#(7),01444'9=82<.342��C 2!!22222222222222222222222222222222222222222222222222����"�� ���}!1AQa"q2���#B��R��$3br� %&'()*456789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz��������������������������������������������������������������������������� ���w!1AQaq"2�B���� #3R�br� $4�%�&'()*56789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz��������������������������������������������������������������������������?��'*���d^�~��N�7��dWF�E�����F�E!�8�QrG��H=y�+V�R�ei�ֳK����tX8����<����(R�ϥHaR�s �a��p���y�QbTe��_)�1���qW^�&� �73}��l�Ƴ��.`�E�-�-'#a�*ݏ�Zvךm��g^���&���ڄ�0"�tE��R]:I���U�\u�oNJ��o�a:T�%gF���s�?�*�Y���W�-�YL`���p2O_z�n��#�=:���l���T[��<�Y�6�̲/Ƹ�Ye�7����%W#��@���խm��d�s��o_�qQ�Ln���nC��'�ןҁ���/�� �������t�ޞ9N6�e��Ю?�dxN��Y�P+Ӧ��*�w���/���l�|�����?Z��6�q/�#c����d���Ȫ�͙N"/*�V���#4�������(1:��YF$�n=*��D H8ɦ%��R�I����AP~��օs������g �;FB���T� ��S��7kB�L�M�Gǿ4��_Ean��� ��S\����ߝ"<��U8>�ڬ"�+8�y��va�?Z��9�m��sO�wo���N �HE���%eDY ,�... and goes on...
如何使用ajax获取图像?
由于
修改
当我将这些变量提交到浏览器上的img.php窗口时,img.php工作正常但是有点夸张将其发布在这里,这是一个示例:
img.php
<?php
require_once("functions.php");
header("Content-type: image/jpeg");
// Settings
$fontSize = 28;
$font = "./fonts/Oswald-Medium.ttf";
$fontlogo = "./fonts/Quicksand-Bold.otf";
$background = $_POST['background'];
$text = $_POST['text'];
$author = $_POST['author'];
$padding = $_POST['padding']; //from edges
$align = $_POST['align'];
.
.
etc
.
.
$md = md5($background).".jpg";
imagejpeg($im, './images/'.$md);
imagejpeg($im);
imagedestroy($im);
?>
ajax脚本上的问题是对这些变量进行实时编辑并在同一窗口上生成de image。
答案 0 :(得分:0)
img.php
正在返回JPEG文件:
header("Content-type: image/jpeg");
...
imagejpeg($im, './images/'.$md);
imagejpeg($im);
imagedestroy($im);
直接访问img.php
是有效的,因为您的浏览器被告知(通过标题)期望JPEG文件并呈现它接收的数据。
通过AJAX访问img.php
时,您告诉浏览器将输出视为文本,这就是它的作用:
$('#result').html(data);
由于您要将图像保存到服务器,因此在通过AJAX调用时,您应该只返回图像的路径(而不是图像本身)。然后,您可以告诉浏览器添加带有图像路径的img
元素:
$('#result').append($('<img>').attr('src', image_url));