Расширения Chrome поддерживают копирование изображения в буфер обмена?

Question

Я ищу в очках и не нашел ответа. Новый API буфера обмена поддерживает копирование изображения в буфер обмена с помощью document.exec command. Если да, как я могу скопировать изображение data url в буфер обмена как изображение?

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

Answer 1

API clipboardData практически реализован во всех браузерах, поэтому вместо команды docuemnt.exec вы можете попробовать ниже также обратиться по ссылке ниже, которая имеет такой же вариант использования, как и у вас.

https://www.lucidchart.com/techblog/2014/12/02/definitive-guide-copying-pasting-javascript/

clipboardData.setData ('text / plain', selection.getText ()); clipboardData.setData ('application / officeObj ’, selection.serialize ()); clipboardData.setData ('image / bmp', draw (selection)); clipboardData.setData ('text / html', ...);

Answer 2

Я занимаюсь разработкой расширения ScreenShotShare Chrome, мне также необходимо скопировать вырезанное изображение в буфер обмена. И я обнаружил, что решение работает для меня.
1. Добавьте «clipboardWrite», «clipboardRead» к разрешениям в файле manifest.json
2. сделать копию работы в background.html с background.js
3. добавить в background.html
4. Я реализую «copyImageToClipboard» для работы в background.js
</p> <pre><code>copyImageToClipboard: function () { var img = $('clipboard-img'); img.src = localStorage[this.screenshotURIName]; // I store the image URI in localStorage var div = $('clipboard-div'); div.contentEditable = true; var range; if (document.createRange) { range = document.createRange(); range.selectNodeContents(div); window.getSelection().removeAllRanges(); window.getSelection().addRange(range); div.focus(); document.execCommand('copy'); } div.contentEditable = false; }

Answer 3

Сегодня, 7 лет спустя, это самая значимая проблема в Google Chrome. Для копирования изображений используется JavaScript. И теперь это возможно!

Chrome 76 Beta поддерживает его: https://blog.chromium.org/2019/06/chrome-76-beta-dark-mode-payments-new.html

Вы можете прочитать полный проект здесь: https://www.chromestatus.com/feature/5074658793619456

и здесь: https://w3c.github.io/clipboard-apis/#async-clipboard-api

Пример:

var data = new Blob(["iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+/HgAFhAJ/wlseKgAAAABJRU5ErkJggg=="], {type : "image/png"});

  const clipboardItemInput = new ClipboardItem({'image/png' : blobInput});
  await navigator.clipboard.write([clipboardItemInput]);

Вы можете проверить это здесь: http://w3c -test.org / clipboard-apis / async-write-image-read-image-manual.https.html

(теперь поддерживается только бета-версия Chrome 76)