使用 jQuery/javascript 显示服务器创建的图像答案

【问题标题】：using jQuery/javascript to display an image created by the server使用 jQuery/javascript 显示服务器创建的图像
【发布时间】：2011-10-03 19:42:43
【问题描述】：

我有一个脚本，它使用 jQuery 通过 AJAX 将数据发布到 PHP 脚本，该脚本使用该数据创建动态 JPG 图像。 PHP 脚本使用 PHP header image/jpeg 命令返回二进制图像数据作为输出（到目前为止一切顺利）。

现在我想在客户端中显示该图像，但我还没有找到合适的解决方案。在阅读了一点之后，我了解到一个可能的解决方案是让 PHP 脚本在 base64 中对其进行编码，并将字符串作为数据 URI 返回给客户端。但是，该解决方案还不够，因为 IE

目前，我正在将图像写入服务器上的临时目录并将文件名返回给客户端。但是，必须有另一种方法来更优雅地解决这个问题。关于如何使用 jQuery/JavaScript 在浏览器中显示返回的二进制图像数据的任何建议？

谢谢！

【问题讨论】：

这是一个可能对您有所帮助的问题/答案：stackoverflow.com/questions/1095102/… 或查看此帖子：blog.calyptus.eu/tags/binary-javascript
How do I load binary image data using Javascript and XMLHttpRequest? 的可能副本
在你的第一部分你说你在 php 中使用图像标题，为什么你不能从 php 文件中输出它？
你能简单地将图像标签的 src 设置为你的 php 文件吗？
@fehays 那么它不会是一个 HTTP“POST”事务。

标签： javascript jquery ajax image server-side

【解决方案1】：

根据我的评论，这就是我的想法。这可能是您的解决方案，但肯定取决于您的代码。

您可以动态创建 img 标签并将 url 参数传递给您的 php 脚本，而不是执行 ajax 发布。下面的代码只写出了 img 标签的样子，因为我真的没有一个 php 脚本来做它。

这是一个小提琴：http://jsfiddle.net/fehays/954zK/

img script param: <input type="text" /><br />
<button>click</button><br />
<div id="imgText"></div>

$(function() {
    $('button').click(function() {         
        $('#imgText').html('&lt;img src="imagecreator.php?param=' + $('input').val() + '" /&gt;');
    });
});

【讨论】：