Javascript 在img上设置二进制数据

假设我有一个

。稍后，我可能希望基于接收二进制数据的ajax调用更改img的内容。我只有在收到ajax回调中的数据后才知道是否要将其应用于图像。我可能决定不去

根据我所做的研究，在img上设置二进制数据的唯一方法是对二进制数据进行base64编码，并将img src设置为结果的base64编码字符串

我的第一个也是主要的问题是：开销是多少？这不意味着我已经将图像下载的处理和内存使用量增加了三倍吗？我的ajax回调获取已加载到内存中的二进制数据，然后我对二进制流进行Base64编码，然后（我假设）浏览器将该流解码回二进制？或者我错过了什么，其实没那么糟糕

我的第二个问题是：为什么没有Base64编码就无法将二进制数据直接设置到img中？我使用的大多数UI语言都允许您将图像从文件加载到“PictureBox”（例如）中，并在“PictureBox”中绘制。为什么img不允许这样做？我想img.binary=字节，它会将src设置为“binary”或类似的东西。看起来这个功能在img和canvas之间是分开的，但是有时候你想两者兼而有之。我只是想知道在我的理解中是否遗漏了一些东西（例如，不允许在img上直接设置二进制数据在设计或实现上有一些好处）

多谢各位
 嗯，这就是我想到的。我不确定性能或内存使用情况如何，但它比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 );

var-oReq=newXMLHttpRequest（）；
open（“post”，“/somelocation/getmypic”，true）；
oReq.responseType=“blob”；
oReq.onload=功能（oEvent）
{
var blob=oReq.响应；
var imgSrc=URL.createObjectURL（blob）；
变量$img=$（'
基本思想是数据不会被篡改，而是作为blob接收。为该blob构造了一个url（我认为这基本上意味着可以使用url访问内存中的该blob）。但好的是，您可以将img src设置为这一点，这太棒了

让我进入正确的轨道，然后进入mdn。注意支持的浏览器