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

Question

我想从 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);

但是，我想访问 file.img 而不是通过 XMLHttpRequest，原因有两个：

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

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

Answer 1

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

我提前将二进制数据转换为 JavaScript 文件，使用以下 Make 规则：

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

需要 sed 行在每行末尾添加 \ 以使其成为一个字符串。

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

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

var imageArray = base64js.toByteArray(image64);

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

Binary asset accessible from Javascript, without going through XMLHttpRequest

html

javascript

xmlhttprequest

arraybuffer