在 img 上设置二进制数据

Setting binary data on img

本文关键字：二进制 数据 设置 img      更新时间：2023-09-26

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

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

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

我的第二个问题是：为什么没有base64编码就无法将二进制数据直接设置到img中？我使用的大多数UI语言都允许您将图像从文件加载到"图片框"（例如）中，也可以在"图片框"中绘制。为什么 img 不允许这样做？我正在考虑 img.binary=bytes 它将 src 设置为"二进制"或类似的东西。此功能似乎分为 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 );

基本思想是数据不会被篡改，并以 blob 的形式接收。为该 blob 构造了一个 url（我认为这本质上意味着您可以使用 URL 访问内存中的该 blob）。但好消息是您可以将 img src 设置为这个，这是......棒。

这个

答案让我走上了正确的轨道，然后是这个页面和mdn上的这个页面。 请注意支持的浏览器。

相关文章：