PHP GD 使用 Ajax 实时编辑图像

Posted 2023-02-25

【中文标题】PHP GD 使用 Ajax 实时编辑图像

【英文标题】：PHP GD live edit image using Ajax

【发布时间】：2016-03-07 18:15:16

【问题描述】：

我有一个表单，我在其中发布一些变量来制作图像（文本、填充、背景图像和文本位置）

<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 脚本对这些变量进行实时编辑并在同一窗口上生成图像。

【问题讨论】：

您还需要出示您的php 代码

@cmorrissey php 代码在这里发布它有点夸张，当我在 img.php 窗口上获得信息时工作正常，问题在于要加载的 ajax 脚本

对此有 2 个答案，所以这是我的问题，以确定您想要什么。您想将这些用户生成的图像实际保存到您的服务器吗？

@cmorrissey 当然，它将图像的最后修改保存在脚本 img.php 上，这就是为什么我试图在实时进行编辑以确保这将是我想要的版本保存 :) 对不起我的英语不好呵呵

【参考方案1】：

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));

【讨论】：

谢谢，我是使用 ajax 和 js 的新手，image_url 必须在一个变量上，并且数据是从像 image_name 这样的输入中获取的，对吧？前任。 var image_url = '/images/' + $('#image_name').val();