iOS端用JavaScript复制Canvas内容到剪贴板为何报错？如何优化？

问题现象 #

在按钮点击事件中使用以下代码复制Canvas内容到剪贴板：

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

这段代码在桌面端Chrome运行正常，但在iOS（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是异步方法，当回调执行时，已经脱离了点击事件的允许上下文范围，因此iOS端拦截了该操作。

现有方案的局限 #

目前的临时解决办法是在Canvas内容更新时预先生成Blob并缓存到canvasBlob变量，点击时直接调用缓存的Blob：

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

但这种方式在Canvas频繁更新的场景下，会持续生成并缓存Blob，导致内存占用过高，效率远低于实时生成Blob的方案。

内容的提问来源于stack exchange，提问作者Fabio Fidanza