Скопируйте содержимое Canvas в буфер обмена в Javascript в iOS

Question

Попытка скопировать содержимое Canvas в буфер обмена с помощью кнопкиclickобработчик события

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

хорошо работает на Chrome Desktop, но на 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 является асинхронным, что приводит к ошибке.

Исправление состояло в том, чтобы подготовить каплю при изменении холста, установивcanvasBlobпеременную и изменив код обработчика событий на использование заранее рассчитанного значения:

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

хотя это работает для приложений с довольно низкой частотой обновления, это может быть проблематично, когда Canvas обновляется часто, и в любом случае это предполагает потенциально большое выделение памяти по сравнению с генерацией «на лету».