設置二進制數據在img

假設我有一個<img/>。這img有src='http://somelocation/getmypic'。稍後，我可能想要根據接收二進制數據的ajax調用來更改img的內容。我只知道一次我收到了ajax回調中的數據，無論我是否想將其應用於圖像。我可能決定不這樣做。設置二進制數據在img

據我所知，我已經完成了在img上設置二進制數據的唯一方法，即通過base64編碼二進制數據並將img src設置爲生成的base 64編碼字符串。

我的第一個和主要問題是：什麼是開銷？這是否意味着我已經將圖像下載的處理和內存使用量增加了三倍？我的ajax回調獲取已加載到內存中的二進制數據，然後我base 64編碼二進制流，然後（我假設）瀏覽器解碼這個流回二進制？還是我錯過了一些東西，其實並沒有那麼糟糕？

我的第二個問題是：爲什麼沒有辦法將二進制數據直接設置到沒有base64encoding的img中？我使用的大多數UI語言都允許您從文件中將圖像加載到「PictureBox」中，並在「PictureBox」中繪製。爲什麼這是不允許的IMG？我在想img.binary =將src設置爲'binary'或類似的字節。看起來這個功能是分開的img和畫布，但有時你想做的兩個。我只是想知道在我的理解中是否缺少了一些東西（例如，有一些設計或實現的好處是不允許直接在img上設置二進制數據）。

謝謝。

來源

2013-10-30 acarlon

嗯，這是我想出來的。我不確定性能或內存使用是什麼，但它比base64編碼容易得多，它可以與asp.net MVC FileStreamResult一起使用。所以，我認爲我會在這裏發佈的情況下，它可以幫助別人：

var oReq = new XMLHttpRequest(); 
    oReq.open("post", '/somelocation/getmypic', true);   
    oReq.responseType = "blob"; 
    oReq.onload = function (oEvent) 
    { 
     var blob = oReq.response; 
     var imgSrc = URL.createObjectURL(blob);       
     var $img = $('<img/>', {     
      "alt": "test image", 
      "src": imgSrc 
     }).appendTo($('#bb_theImageContainer')); 
     window.URL.revokeObjectURL(imgSrc); 
    }; 
    oReq.send(null);

的基本思想是，數據不被篡改，它是收到一個blob。爲這個blob構建一個url（我認爲這基本上意味着你可以使用一個URL來訪問內存中的blob）。但好處是你可以設置IMG SRC到這個，這是...真棒。

This answer把我放在正確的軌道上，然後this page和this page上mdn。請注意支持的瀏覽器。

來源

2013-10-30 11:16:39 acarlon

設置二進制數據在img

回答

相關問題