Question

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

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

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

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

谢谢。

Answer 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 on mdn。请注意支持的浏览器。

在img上设置二进制数据

1 个答案: