ArrayBuffer 到 blob 的转换
ArrayBuffer to blob conversion
我有一个项目需要在浏览器中显示 djvu 架构。
我发现了这个旧的 library on Github,据我所知,它将 djvu 文件转换为 bmp,然后将它们放入 canvas 元素中。
正如我所说,库是旧的(最后一次提交是 5 年前),所以我需要做一些更正。主要问题是 lib 使用过时的 BlobBuilder。
我解决这个问题的步骤:
- 通过 Chrome DevTools
解压这个库
- 初始错误在第 3774 行
var c = "undefined" != typeof MozBlobBuilder ? MozBlobBuilder : "undefined" != typeof WebKitBlobBuilder ? WebKitBlobBuilder : console.log("warning: cannot build blobs")
- 我把这一行注释掉了
- 接下来,我注释掉了行
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 could not be decoded!"(抛入 h.onerror 处理程序)。
所以,我的问题是:我做错了什么?
我不知道为什么作者将他的 Uint8Array
包装在一个新的中...请注意,我真的不知道已弃用的 BlobBuilder API,但我有一个错字在您的代码中可以看到,您需要将 TypedArray 包装在普通数组中:
new Blob([new Uint8Array(buffer, byteOffset, length)]);
Blob 构造函数将 blobParts sequence 作为第一个参数,然后搜索 BufferSource、USVStrings 和 Blob 这个序列中的元素。因此,当您传递 TypedArray 时,它实际上会遍历此 TypedArray 的所有条目并将它们视为 USVString(并因此将它们的数值转换为 Blob 中的 UTF-8 字符串)。这很少是你想要的,所以最好总是在这个构造函数中传递一个 Array。
var buffer = new ArrayBuffer(32);
new Blob([buffer]);
所以 Uint8Array 应该是
new Blob([new Uint8Array([1, 2, 3, 4]).buffer]);
我有一个项目需要在浏览器中显示 djvu 架构。
我发现了这个旧的 library on Github,据我所知,它将 djvu 文件转换为 bmp,然后将它们放入 canvas 元素中。
正如我所说,库是旧的(最后一次提交是 5 年前),所以我需要做一些更正。主要问题是 lib 使用过时的 BlobBuilder。
我解决这个问题的步骤:
- 通过 Chrome DevTools 解压这个库
- 初始错误在第 3774 行
var c = "undefined" != typeof MozBlobBuilder ? MozBlobBuilder : "undefined" != typeof WebKitBlobBuilder ? WebKitBlobBuilder : console.log("warning: cannot build blobs")
- 我把这一行注释掉了
- 接下来,我注释掉了行
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 could not be decoded!"(抛入 h.onerror 处理程序)。
所以,我的问题是:我做错了什么?
我不知道为什么作者将他的 Uint8Array
包装在一个新的中...请注意,我真的不知道已弃用的 BlobBuilder API,但我有一个错字在您的代码中可以看到,您需要将 TypedArray 包装在普通数组中:
new Blob([new Uint8Array(buffer, byteOffset, length)]);
Blob 构造函数将 blobParts sequence 作为第一个参数,然后搜索 BufferSource、USVStrings 和 Blob 这个序列中的元素。因此,当您传递 TypedArray 时,它实际上会遍历此 TypedArray 的所有条目并将它们视为 USVString(并因此将它们的数值转换为 Blob 中的 UTF-8 字符串)。这很少是你想要的,所以最好总是在这个构造函数中传递一个 Array。
var buffer = new ArrayBuffer(32);
new Blob([buffer]);
所以 Uint8Array 应该是
new Blob([new Uint8Array([1, 2, 3, 4]).buffer]);