在 img 上设置二进制数据答案

【问题标题】：Setting binary data on img在 img 上设置二进制数据
【发布时间】：2013-11-09 11:05:01
【问题描述】：

假设我有一个<img/>。这个img有src='http://somelocation/getmypic'。稍后，我可能想根据接收二进制数据的 ajax 调用更改 img 的内容。我只有在收到 ajax 回调中的数据后才知道是否要将其应用于图像。我可能决定不这样做。

就我所做的研究而言，在 img 上设置二进制数据的唯一方法是通过 base64 编码二进制数据并将 img src 设置为生成的 base 64 编码字符串。

我的第一个主要问题是：开销是多少？这是否意味着我将图像下载的处理和内存使用量增加了两倍？我的 ajax 回调获取已加载到内存中的二进制数据，然后我对二进制流进行 base 64 编码，然后（我假设）浏览器将此流解码回二进制？还是我错过了什么，实际上并没有那么糟糕？

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

谢谢。

【问题讨论】：

标签： javascript html ajax asp.net-mvc image

【解决方案1】：

嗯，这就是我想出的。我不确定性能或内存使用情况如何，但它比 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 上。注意支持的浏览器。

【讨论】：