在没有 filereader/xmlttprequest 的情况下将 blob 转换为 arraybuffer答案

【问题标题】：convert blob to arraybuffer without filereader/xmlttprequest在没有 filereader/xmlttprequest 的情况下将 blob 转换为 arraybuffer
【发布时间】：2018-04-09 19:37:12
【问题描述】：

我想在不复制数据的情况下从 ArrayBuffer（比如说 100MB）转换为 Blob，然后再从 Blob 转换回 ArrayBuffer。
FileReader / XMLHttpRequest 确实复制了数据，那么还有其他方法吗？

var b = new Blob([new Uint8Array(someArrayBuffer)]);

PS：我想在不复制大型只读缓冲区的情况下进行跨表通信，例如一个本地 ArrayBuffer 是 500MB 我想在多个选项卡中使用它而不复制数据。

【问题讨论】：

我不这么认为。
你的代码在哪里？
您总是会在var 或其他任何地方复制您的数据。FileReader() 很强大，为什么您不想使用它？
@pirs 我想要一个对它的引用（不重复），但来自 blob 对象
developer.mozilla.org/fr/docs/Web/API/Body/arrayBuffer ?也许？

标签： javascript blob arraybuffer

【解决方案1】：

可能有一些方法可以在没有 FileReader 或 XHR 的情况下将 Blob 转换为 ArrayBuffer，但无论如何它们都会复制数据。

但听起来您需要的不是从 Blob 转换为 ArrayBuffer，而是在选项卡之间共享 ArrayBuffer 或 Blob。

为此，您有多种方法：

将 ArrayBuffer/Blob 存储在主页上，并直接从子页面访问它，就像您可以访问任何其他全局变量一样：
```
// in parent
window.myArrayBuffer = buffer;
```
```
// in child
var buf = window.opener.myArrayBuffer;
doSomethingWithBuffer(buf);
```
Plnkr.

如果您一次只需要在一个选项卡中访问 ArrayBuffer，那么您可以使用postMessage API 将其缓冲区转移到其他页面。

// in parent
child.postMessage(myArrayBuffer, 'origin', [myArrayBuffer]);
// here myArrayBuffer's buffer is *transferred* to child,
// it can't be accessed by parent anymore

// in child
window.onmessage = e => {
  buf = e.data;
  ...

Plnkr.

如果您只需要在不同但来自同源窗口的窗口上显示 Blob，则使用 blobURI。它只会创建一个指向内存中数据的指针，并从垃圾收集中锁定这些数据，直到您的文档死亡，但不会复制数据。
如果您不需要支持 IE 或 Safari，您甚至可以考虑SharedWorkers，您将首先在其上传输您的 ArrayBuffer，并让您的所有选项卡根据相同的数据要求它执行计算.

【讨论】：

如果我从不同的窗口使用 bloburi，sharedworkers 的想法很好，当我想访问 Blob 的 ArrayBuffer 时，我仍然需要从其他窗口复制缓冲区，对吗？因为 Blob 没有字段作为缓冲区
@user818117 blobURI 用于将数据显示/下载到用户磁盘上作为文件。不要用它来共享一个 ArrayBuffer，这没有任何意义。你错过了前两颗子弹吗？要在相同的原始帧之间共享任何变量，只需访问它。对于跨域的，使用 postMessage 传输。
如果我想在多个标签之间交换缓冲区指针但同源，而不是父或子，我该如何传输指针或发布消息
@user818117 来自网络脚本，你根本不能，知道其他打开的选项卡是什么，这将是一个巨大的安全威胁。从 chrome: scripts (extension)，那么你可能可以。但是您可以更轻松地从自己的脚本中打开这些页面。