Как мне скопировать изображение в ответ на Ctrl + C? - PullRequest
Новая
       72

Как мне скопировать изображение в ответ на Ctrl + C?

1 голос
/ 20 февраля 2020

Я создаю графический редактор с функцией копирования / вставки. Я хочу, чтобы пользователь мог Ctrl + C выделенную зону изображения и скопировать ее в буфер обмена таким образом.

Я знаю, что есть метод, который вы можете использовать для программной установки содержимого буфера обмена, то есть Clipboard.write , а в новейших Chrome версиях (у меня есть версия 80) он также позволяет копировать изображения, и мне не нужно обратная совместимость вообще. Это будет работать, и это работает в случае явного нажатия кнопки «Копировать». Но использование этого требует получения разрешения пользователя на запись в буфер обмена (то есть 'clipboard-write'), хотя это разрешено по умолчанию в Chrome.

Я также знаю, что в элементе есть событие, называемое oncopy и существует способ изменить содержимое буфера обмена, копируемого в него, без запроса разрешения пользователя, что является предпочтительным способом. Итак, я попробовал что-то вроде этого: 

// placing that listener on the document is a bad practice I suppose
// because it would prevent user from copying anything on the page,
// so consider that just an example code
document.oncopy = async (e) => {
    const blob = await new Promise(resolve => areaCanvas.toBlob(resolve))
    e.clipboardData.setData('image/png', blob)
}

Это, вероятно, не сработало бы из-за функции asyn c. Тогда я попытался поднять создание блобов выше и получил следующий код: 

let blob
// ... user selects and area ...
blob = await new Promise((resolve) => areaCanvas.toBlob(resolve))

document.oncopy = (e) => {
    e.preventDefault()
    e.clipboardData.setData('image/png', blob)
}

Но это, очевидно, приводит к пустому буферу обмена. Так есть ли способ скопировать изображение (или холст) в буфер обмена в ответ на Ctrl + C, не запрашивая разрешение пользователя на запись в буфер обмена?

...