Javascript ArrayBuffer 到 Blob 的转换
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44147912/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ArrayBuffer to blob conversion
提问by Rulisp
I have a project where I need to display djvu schemas in browser.
我有一个项目需要在浏览器中显示 djvu 模式。
I found this old library on Githubwhich, as far as I understood, converts djvu files to bmp and then puts them into canvas element.
我在 Github 上找到了这个旧库，据我所知，它将 djvu 文件转换为 bmp，然后将它们放入画布元素中。
As I said, library is old(last commit was 5 years ago), so I need to make some corrections. Main problem is that lib uses obsolete BlobBuilder.
正如我所说，库很旧（上次提交是 5 年前），所以我需要做一些更正。主要问题是 lib 使用过时的 BlobBuilder。
Steps I made to solve this problem:
我为解决此问题而采取的步骤：
- Decompress this library via Chrome DevTools
- Initial error is at line 3774
var c = "undefined" != typeof MozBlobBuilder ? MozBlobBuilder : "undefined" != typeof WebKitBlobBuilder ? WebKitBlobBuilder : console.log("warning: cannot build blobs") - I commented out this line
- Next, I commented out line
c = new c;and some of following lines too.
- 通过 Chrome DevTools 解压这个库
- 初始错误在第 3774 行
var c = "undefined" != typeof MozBlobBuilder ? MozBlobBuilder : "undefined" != typeof WebKitBlobBuilder ? WebKitBlobBuilder : console.log("warning: cannot build blobs") - 我注释掉了这一行
- 接下来，我也注释掉了 line
c = new c;和一些以下几行。
So, now it looks this way(variable I is array buffer, and ololo1 and ololo2 are some kind of offset and limit)
所以，现在看起来是这样（变量 I 是数组缓冲区，而 ololo1 和 ololo2 是某种偏移和限制）
var c = new Blob(new Uint8Array(new Uint8Array(I,ololo1,ololo2)))
, b = b.createObjectURL(c)
, c = document.getElementById(kb)
, f = c.getContext("2d")
, h = new Image
, g = a[Ea >> 2]
, i = a[Fa >> 2]
, j = c.width
, k = Math.round(i * j / g);
h.onload = function()
{
var a = g / j;
4 < a && (a = 4);
1 > a && (a = 1);
f.globalAlpha = 1;
for (N = 0; N < a; N++)
f.drawImage(h, N, N, g - a + N, i - a + N, 0, 0, j, k),
f.globalAlpha *= 1 - 1 / a;
R(h.complete, "Image /bmp.bmp could not be decoded")
}
;
h.onerror = function(errorMsg, url, lineNumber, column, errorObj) {
console.log(errorMsg, url, lineNumber, column, errorObj);
console.log("Image /bmp.bmp could not be decoded!")
}
;
And now I stuck at error "Image /bmp.bmp could not be decoded!"(throwed in h.onerror handler).
现在我陷入了错误“无法解码图像 /bmp.bmp！”（抛出 h.onerror 处理程序）。
So, my question is: what I am doing wrong?
所以，我的问题是：我做错了什么？
回答by Kaiido
I don't know why the author did wrap his Uint8Arrayin an new one... note that I don't really know either the deprecated BlobBuilder API, but one typo I can see in your code is that you need to wrap your TypedArray in a normal Array:
我不知道作者为什么Uint8Array用一个新的包装他的......请注意，我真的不知道已弃用的 BlobBuilder API，但我在您的代码中看到的一个错字是您需要将 TypedArray 包装在一个普通的数组：
new Blob([new Uint8Array(buffer, byteOffset, length)]);
The Blob constructor takes a blobParts sequenceas first parameter, and then searches for BufferSource, USVStringsand Blobelements in this sequence. So when you pass a TypedArray, it will actually iterate over all the entries of this TypedArrayand treat these as USVString(and thus convert their numerical value to UTF-8 strings in the Blob). That's rarely what you want, so better always pass an Arrayin this constructor.
Blob 构造函数将blobParts 序列作为第一个参数，然后在此序列中搜索BufferSource、USVStrings和Blob元素。因此，当您传递TypedArray 时，它实际上会遍历此TypedArray 的所有条目并将它们视为USVString（从而将它们的数值转换为Blob中的 UTF-8 字符串）。这很少是你想要的，所以最好总是在这个构造函数中传递一个数组。
回答by xsilen T
var buffer = new ArrayBuffer(32);
new Blob([buffer]);
so the Uint8Array should be
所以 Uint8Array 应该是
new Blob([new Uint8Array([1, 2, 3, 4]).buffer]);
