javascript - ArrayBuffer 到 blob 的转换

Question

我有一个项目，需要在浏览器中显示 djvu 架构。

我发现了这个旧的library on Github据我了解，它将 djvu 文件转换为 bmp，然后将它们放入 canvas 元素中。

正如我所说，库很旧(上次提交是 5 年前)，所以我需要进行一些更正。主要问题是 lib 使用过时的 BlobBuilder。

我为解决此问题而采取的步骤:

1. 通过 Chrome DevTools 解压该库
2. 初始错误位于第 3774 行 var c = "undefined"!= typeof MozBlobBuilder ? MozBlobBuilder:“未定义”!= WebKitBlobBuilder 的类型？ WebKitBlobBuilder : console.log("警告:无法构建 blob")
3. 我注释掉了这一行
4. 接下来，我注释掉了 c = new c; 行以及以下一些行。

所以，现在看起来是这样的(变量 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!")
            }           
            ;

现在我遇到了错误“Image/bmp.bmp 无法解码!”(在 h.onerror 处理程序中抛出)。

所以，我的问题是:我做错了什么？

Answer 1

我不知道为什么作者将他的 Uint8Array 包装在一个新的中...请注意，我并不真正了解已弃用的 BlobBuilder API，但我在您的代码中看到的一个拼写错误是您需要将您的 TypedArray 包装在普通的 Array 中:

new Blob([new Uint8Array(buffer, byteOffset, length)]);

Blob() 构造函数采用 blobParts sequence作为第一个参数，然后在此序列中搜索 BufferSource、USVStrings 和 Blob 元素。因此，当您传递 TypedArray 时，它实际上会迭代此 TypedArray 的所有条目，并将它们视为 USVString (从而将其数字转换为Blob 中的 UTF-8 字符串的值)。这很少是您想要的，因此最好始终在此构造函数中传递 Array。

请注意，如果您不需要对缓冲区进行切片，那么最好直接传递它，而不是使用中间的 Uint8Array (但仍然在普通的 Array 中) ):

new Blob([buffer]);