可从 Javascript 访问的二进制资产，无需通过 XMLHttpRequest答案

【问题标题】：Binary asset accessible from Javascript, without going through XMLHttpRequest可从 Javascript 访问的二进制资产，无需通过 XMLHttpRequest
【发布时间】：2018-11-29 14:06:31
【问题描述】：

我想从 JavaScript 访问任意二进制文件。我找到了建议通过XMLHttpRequest、数组缓冲区和Uint8Array 的文档，如下所示：

var req = new XMLHttpRequest();
req.open("GET", "file.img", true);
req.responseType = "arraybuffer";

req.onload = function () {
    var arrayBuffer = req.response;
    if (arrayBuffer) {
        var bytes = new Uint8Array(arrayBuffer);
        // use bytes for the remainder of the program
    }
}
req.send(null);

但是，我想在不通过XMLHttpRequest 的情况下访问file.img，原因有两个：

我希望它完全在本地工作，即如果页面和 file.img 都通过 file: URI 访问
XMLHttpRequest.send/XMLHttpRequest.onload 的异步特性对我来说是不必要的复杂化，因为 file.img 的大小为

总而言之，我正在寻找一种方法，以某种方式将这个二进制资产 file.img 包含在我的页面中，就像包含具有同步 img 标签的图像一样。

【问题讨论】：

使用file: URI明显限制了您的选择。我想不出一种方法可以在您以这种方式加载的页面中实际包含随机数据文件。因此，这意味着您基本上必须将 file.img 的数据嵌入到 JavaScript in 中，而不是将其分开——这并不是真正“包含”页面中的二进制资产，而是包含页面中二进制资产的副本。强烈建议使用简单、小型的本地网络服务器和 XHR。
实际上，提前将其转换为 javascript（使用 xxd -i 之类的东西和一些后期处理）对我的用例来说可能不是一个坏主意。
酷，这可能就是要走的路。
如果您将其发布为答案，我很高兴接受该建议（即使您不同意：））
哦，我这样做没有任何问题。 :-) 我只是不认为这是对问题的回答，因为它并没有真正包括文件，而是包括文件中的数据（因此，如果文件更改，页面的副本就会过期）。

标签： javascript html xmlhttprequest arraybuffer

【解决方案1】：

我最终将二进制资产存储在 base64 编码的 JavaScript 字符串文字中，使用 <script src=...> 导入它，并使用 base64-js 访问它。

我提前将二进制数据转换为具有以下 Make 规则的 JavaScript 文件：

%.img.js: %.img
    (echo "var image64 = \"\\"; \
    base64 $< | sed -e 's/$$/\\/'; \
    echo '";') > $@

需要sed这一行，将\添加到每行的末尾，使其成为一个字符串。

然后，从 JavaScript 访问它是使用 base64-js 的简单问题，因为它已经具有将 base64 编码的字符串解码为 Uint8Array 的函数：

<script src="js/base64js/base64js-1.3.0.min.js"></script>
<script src="mydata.img.js"></script>

var imageArray = base64js.toByteArray(image64);

【讨论】：