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

I have a script that uses jQuery to POST data through AJAX to a PHP script, that uses that data to create a dynamic JPG image. The PHP script returns the binary image data as output using the PHP header image/jpeg command (so far so good).

我有一个脚本使用jQuery通过AJAX将数据发送到PHP脚本，该脚本使用该数据创建动态JPG图像。 PHP脚本使用PHP头图像/ jpeg命令将二进制图像数据作为输出返回（到目前为止一直很好）。

Now I want to display that image in the client, but I haven't been able to find a proper solution for this yet. After reading up a bit I understand a possible solution would be to have the PHP script encode it in base64 and return the string to the client as a data URI. However, that solution won't suffice because it is not supported by IE < 8 and still limited to 32K images in IE 8.

现在我想在客户端显示该图像，但我还没有找到适合的解决方案。读了一下我明白了一个可能的解决方案是让PHP脚本在base64中编码它并将字符串作为数据URI返回给客户端。但是，该解决方案是不够的，因为它不受IE <8支持，并且仍然限于IE 8中的32K图像。

For the moment, I am writing the image to a temp dir on the server and return a filename to the client. However, there must be another way to solve this more elegantly through. Any advise on how I can use jQuery/JavaScript to display the returned binary image data in the browser?

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

Thanks!

谢谢！

1 个解决方案

#1

Per my comment, here's what I had in mind. This could possibly be a solution for you, but certainly it depends on your code.

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

You could create the img tag dynamicaly and pass url parameters to your php script instead of doing an ajax post. The code below only writes out what the img tag would look like since I don't really have a php script that does it.

你可以动态创建img标签并将url参数传递给你的php脚本，而不是做一个ajax帖子。下面的代码只写出了img标签的样子，因为我实际上并没有这样做的PHP脚本。

Here's a fiddle: http://jsfiddle.net/fehays/954zK/

这是一个小提琴：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;');
    });
});

#1