在 iOS 中使用 Javascript 将 Canvas 内容复制到剪贴板

Question

尝试将 Canvas 内容复制到按钮内的剪贴板

click

事件处理程序

canvas.toBlob(
blob => { navigator.clipboard.write([new ClipboardItem({'image/png': blob})]) }
)

在 Chrome 桌面上运行良好，但在 iO 上（在 iPad 上测试）会导致

notallowederror: the request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.

我发现该问题与剪贴板处理必须在用户输入生成的事件内发生有关。

虽然上述代码位于事件处理程序中，但 canvas.toBlob 调用是异步的，从而导致错误。

修复方法是在画布更改时准备 blob，设置

canvasBlob

变量并更改事件处理程序的代码以使用预先计算的值：

navigator.clipboard.write([new ClipboardItem({'image/png': canvasBlob})])

虽然这适用于刷新频率相当低的应用程序，但当 Canvas 频繁更新时可能会出现问题，并且在任何情况下，与动态生成相比，它都意味着潜在的大量内存分配。