动态生成的图像，使用 POST 获取答案

【问题标题】：Dynamically generated images, fetched using POST动态生成的图像，使用 POST 获取
【发布时间】：2012-05-27 18:02:57
【问题描述】：

我需要在 JSP 中动态加载图像。我试过了 <img src="servletUrl?p1=x&p2=y"/>，但问题是 URL 太长，无法使用 GET 发送。

我现在正在执行 POST 调用。根据我发送的参数，我从 servlet 生成饼图图像。图片没有保留，所以我不能返回像“images/image1.jpg”这样的东西并将其设置为图片的src。

所以我将图像作为字节数组返回并设置适当的图像内容类型。

我的问题是：一旦我在 javascript 中有图像字节，如何在相应的 img 标签中显示它们？

这是我的 AJAX 调用：

new Ajax.Request(url, {
        method: 'post',
        parameters: params,
        onComplete: function(request) {
                    alert(request.responseText);      
        }
});

【问题讨论】：

为什么网址过长？这似乎有点奇怪......
嘿，你能把它弄出来吗...这会有所帮助
@beerbajay：因为其中一个参数是 JSON 化的文档，有很多字段。这是一个尚未持久化的文档，它根据用户在各个字段中输入的值生成饼图并从 servlet 返回。
这应该在哪些浏览器中运行？
@Andreas：FF 中的第一名。但是在我让它在FF中运行之后，我也想让它在IE9中运行。

标签： java javascript ajax prototypejs

【解决方案1】：

我自己没有尝试过，但它应该可以工作。您可以使用dataUrl 创建图像并设置其源代码。您必须将 byte[] 转换为 base64 编码字符串才能正常工作。

new Ajax.Request(url, {
        method: 'post',
        parameters: params,
        onComplete: function(response) {
            var img = new Image();
            img.src = "data:image/png;base64," + response;

            document.body.appendChild(img);
        }
});

【讨论】：

【解决方案2】：

这是我想到的解决方案，应该适用于所有浏览器：

代替 AJAX 和 <img> 标记，使用预填充表单的 <iframe>，其中包含所有必要的 POST 参数的隐藏字段，并设置 onload 处理程序以将此表单提交到图像服务脚本。使此脚本返回将显示在此 iframe 中的纯图像，保持页面其余部分不变。

【讨论】：