将 SharedArrayBuffer 转换为普通的 ArrayBuffer

Question

我正在尝试基于 SharedArrayBuffer 从 Uint8ClampedArray 创建新的 ImageData，因为 ImageData 构造函数不接受基于 Uint8ClampedArray在 SharedArrayBuffer 上，我必须以某种方式将其转换为正常的 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 不会给我们...）。