我如何使用$.Ajax设置图像SRC为动态图像/png数据

本文关键字：图像 动态 png 数据 SRC 何使用 Ajax 设置 | 更新日期: 2023-09-27 18:05:40

使用少量用户输入参数动态生成图像。通过写入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]

在服务器上，我返回一个覆盖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));
}

我如何使用$.Ajax设置图像SRC为动态图像/png数据

可能是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);
    }
});

编辑:没关系，不是吗

相关文章：