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开发者工具向/ Images / GetImage64显示带有text / plain响应的ajax（XHR）POST。内容类似于服务器上生成的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的错。尝试强制jQuery将结果视为纯文本dataType: 'text'：

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

编辑：没关系，不是那样。

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

1 个答案: