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

使用少量用户输入参数动态生成图像。我能够成功地产生图像通过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开发工具显示带有文本/纯文本响应的/ Image/GetImage64的ajax（XHR）POST。内容看起来像服务器上生成的PNG。然而，另一个“其他”请求与下面的网址进行的，而且我不知道发生了什么事情

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

来源

2011-08-12 David Fox

如果您以'data ...'作为url获得另一个请求，那么由于某些原因，chrome不允许您将数据url动态设置为图像的src。它正在请求'http：//example.com/data: image/....' –

@Marc B Firefox 5和IE9的行为类似。无论如何，我的图像不会渲染 –

这[博客文章]（http://onwebdev.blogspot.com/2011/03/jquery-data-urls-and-ajax.html）似乎表明它应该可以工作，尽管它是使用GIF而不是PNG。也许捕获base64数据尝试将其解码回二进制文件，看看它是否按位相同。在实际的png数据打破'src'设置之前，可能会出现一些损坏的输出。 –

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

编辑：没关系，是不是。

来源

2011-08-12 20:02:30 Laurence

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

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

回答

相关问题