将 SharedArrayBuffer 转换为普通的 ArrayBuffer

Question

我正在尝试从基于SharedArrayBuffer 的Uint8ClampedArray 创建一个新的ImageData，因为ImageData 构造函数不接受基于Uint8ClampedArray 的Uint8ClampedArray@ 我必须将其转换为正常ArrayBuffer不知何故。

有什么想法可以将SharedArrayBuffer 转换为普通的ArrayBuffer 或如何使用SharedArrayBuffer 创建ImageData？

Answer 1

您必须将该数据复制到上下文将完全拥有的缓冲区中。

您只需在 SAB 的 Uint8ClampedArray 上调用 .slice() 即可：

const sab = new SharedArrayBuffer( 50 * 50 * 4 );
const arr = new Uint8ClampedArray( sab );
const img = new ImageData( arr.slice(), 50, 50 );

或者如果你要多次绘制这个 SAB 的内容，那么创建一次固定的 ArrayBuffer 并用 SAB 的内容填充它：

const sab = new SharedArrayBuffer( 50 * 50 * 4 );
const sab_view = new Uint8ClampedArray( sab );

const ab = new ArrayBuffer(sab.byteLength);
const arr = new Uint8ClampedArray( ab );
const img = new ImageData( arr, 50, 50 );
// later when sab has new content being set
arr.set(sab_view, 0);

Live example _(source)

（外包是因为 SharedArrayBuffer 需要 COOP，StackSnippet 不会给我们...）。