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

Question

图像是使用少量用户输入参数动态生成的。通过写入 Response.OutputStream

，我能够通过 GET 成功生成图像

$('#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]

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

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

Answer 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);
    }
});

编辑:没关系，不是吗。