ArrayBuffer 到 Blob 的转换

IT技术 javascript djvu
2021-03-04 19:15:11

我有一个项目需要在浏览器中显示 djvu 模式。

在 Github 上找到了这个旧,据我所知,它将 djvu 文件转换为 bmp,然后将它们放入画布元素中。

正如我所说,图书馆很旧(最后一次提交是 5 年前),所以我需要做一些更正。主要问题是 lib 使用过时的 BlobBuilder。

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

  1. 通过 Chrome DevTools 解压这个库
  2. 初始错误在第 3774 行 var c = "undefined" != typeof MozBlobBuilder ? MozBlobBuilder : "undefined" != typeof WebKitBlobBuilder ? WebKitBlobBuilder : console.log("warning: cannot build blobs")
  3. 我注释掉了这一行
  4. 接下来,我也注释掉了 linec = 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!")
            }           
            ;

现在我陷入了错误“无法解码图像 /bmp.bmp!”(抛出 h.onerror 处理程序)。

所以,我的问题是:我做错了什么?

2个回答

我不知道作者为什么Uint8Array用一个新的包装他的......请注意,我真的不知道已弃用的 BlobBuilder API,但我在您的代码中看到的一个错字是您需要将 TypedArray 包装在一个普通的数组:

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

Blob 构造函数将blobParts 序列作为第一个参数,然后在该序列中搜索BufferSourceUSVStringsBlob元素。因此,当您传递TypedArray 时,它实际上会遍历此TypedArray 的所有条目并将它们视为USVString(从而将它们的数值转换为Blob中的 UTF-8 字符串)。这很少是你想要的,所以最好总是在这个构造函数中传递一个数组

也节省了我的一天(我传入了一个 arrayBuffer 来处理二进制数据,但需要将其包装为 Array)。但是,我认为 Uint8Array 应该在没有括号的情况下传入,因为它已经是一个数组,因此不是 OP 的问题。您需要 ArrayBuffer 周围的括号。
2021-04-27 19:15:11
^ 这只是一个观点。不确定起点是 ArrayBuffer 还是其他类型的视图?这可能会使 new Blob(...) 中的 blob 构建器脱轨
2021-04-28 19:15:11
@aamarks 不,如果你传递一个 Uint8Array,你会将它的所有 0~255 个值保存为 utf8 字符串,因为 Blob 构造函数不会访问它的.buffer属性,并且它可能是想要将包含的数据保存为二进制的。
2021-05-04 19:15:11
我明白了,谢谢。似乎传入 Uint8Array 视图所基于的缓冲区或 Uint8Array,只要它们都在括号中就可以工作。
2021-05-07 19:15:11
Uint8Array 是一种浪费。你不需要它。只是new Blob([buffer])ArrayBuffer 是一个字节数组。
2021-05-13 19:15:11
var buffer = new ArrayBuffer(32);

new Blob([buffer]);

所以 Uint8Array 应该是

new Blob([new Uint8Array([1, 2, 3, 4]).buffer]);