在 javascript 中提交输入文本后显示 gif 图像答案

【问题标题】：Display a gif image after submitting a input text in javascript在 javascript 中提交输入文本后显示 gif 图像
【发布时间】：2014-01-10 21:11:45
【问题描述】：

编写一个要求输入文本的 javascript 程序。按submit 按钮显示该命名文本的 gif 图像。

假设输入文本是243，按下提交按钮后会显示243.gif图片。

输入： 243
输出： 243.gif 图片

【问题讨论】：

我猜是你的硬件，如果你有任何尝试，请显示代码。以便我们为您提供帮助

标签： javascript image gif

【解决方案1】：

不行，仅使用 Javascript 是无法生成 gif 图像的。

您需要一些服务器端编码/插件，其中传递数字返回 gif 图像（可以通过 ajax 处理）。

【讨论】：

【解决方案2】：

正如 Praveen 在他的回答中所说，您需要结合使用服务器端语言和 JavaScript。像 PHP 这样的东西可以像这样处理你的输入文本：

<?  
    $text = $_POST['input_text'];
    $file_name = time().'-'.$_POST['input_text'].'.gif';
    $im = @imagecreate(110, 20);
    $background = imagecolorallocate($im, 255, 255, 255);
    $text_color = imagecolorallocate($im, 0, 0, 0);

    header("Content-Type: image/gif");
    imagestring($im, 5, 5, 5,  $text, $text_color);
    imagegif($im, $file_name);
    imagedestroy($im);

    echo $file_name;
?>

您的 HTML 将如下所示：

<img id="img" src="">

<input type="text" id="input_text">
<input type="submit" value="Submit" id="submit">

如果您使用的是 jQuery，那么您可以在处理完图像后使用类似这样的东西来 ajax：

$('#submit').click(function() {
    var image_text = $("#input_text").val();

    $.post('ajax.php', { input_text: image_text }, function(data) {
        $('#img').attr('src', data);
    });
});

【讨论】：