如何使用 $.ajax 将图像 src 设置为动态图像/png 数据？答案

【问题标题】：How can I use $.ajax to set image src to dynamic image/png data?如何使用 $.ajax 将图像 src 设置为动态图像/png 数据？
【发布时间】：2011-08-13 04:07:57
【问题描述】：

图像是使用少量用户输入参数动态生成的。我可以通过 GET 成功生成图像，方法是写信给Response.OutputStream

$('#myImage').attr('src', 'Images/GetImage?param1=value1&param2=value2');

还有几个附加参数。但是，我怎样才能通过 POST 来实现呢？我想我可能会使用$.ajax 和base64 编码Image，但它不太管用。

$.ajax({
    url: 'Images/GetImage64',
    type: 'POST',
    data: { param1: 'value1', param2: 'value2' },
    success: function (data) {
        //$('#myImage').attr('src', data); 
        $('#myImage').attr('src', 'data:image/png;base64, ' + data);
    }
});

Chrome 开发工具显示一个 ajax (XHR) POST 到 /Images/GetImage64 并带有文本/纯文本响应。内容看起来像在服务器上生成的 PNG。但是，使用下面的 URL 发出另一个“其他”请求，我不知道发生了什么

data:image/png:base64, [binary]

在服务器上，我返回一个覆盖 ExecuteResult 的 ImageResult : ActionResult 并使用 base64 编码图像进行响应。

public override void ExecuteResult(ControllerContext context)
{
    context.HttpContext.Response.Clear();
    context.HttpContext.Response.ContentType = "text/plain";
    context.HttpContext.Response.BinaryWrite(GetBase64Image(Image));
}

【问题讨论】：

如果您收到另一个以data... 作为 url 的请求，那么由于某种原因，chrome 不允许您动态地将数据 url 设置为图像的 src。它正在请求http://example.com/data:image/....
@Marc B Firefox 5 和 IE9 的行为类似。无论如何，我的图像不会呈现
这个blog post 似乎表明它应该可以工作，尽管它使用的是 gifs 而不是 pngs。也许捕获base64数据尝试将其解码回二进制，看看它是否按位相同。在实际的 png 数据破坏“src”设置之前，可能有一些损坏的输出。
@Marc B 不完全是这样，但您的建议帮助我找到了问题所在。我无意中从 Image 对象返回了字节数组，而不是 base64 编码的数据字符串

标签： c# javascript jquery image

【解决方案1】：

可能是 jQuery 的错。尝试使用 dataType: 'text' 强制 jQuery 将结果视为纯文本：

$.ajax({
    url: 'Images/GetImage64',
    type: 'POST',
    dataType: 'text',
    data: { param1: 'value1', param2: 'value2' },
    success: function (data) {
        $('#myImage').attr('src', 'data:image/png;base64,' + data);
    }
});

编辑：没关系，不是吗。

【讨论】：

谢谢，但是是我的编码搞砸了——我没有向客户端发送正确的字节数组