如何使用$ .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數據？

回答

相關問題