Можно ли сделать скриншот из буфера обмена?

Question

Могу ли я сделать скриншот из буфера обмена, отправить его в ajax и поместить его в тег <img>?

Например,

У меня есть такая форма:

<form>
  <div id="img"><img src="need put screen here!"></div>
  <textarea></textarea>
  <button type="submit">Answer!</button>
</form>

Мне это нужно!Люди просят скриншоты из буфера обмена.

Если экран остается в буфере обмена в коде base64, я делаю это на картинке в PHP.

Я только не знаю, как яможно сделать снимок экрана из буфера обмена и отправить его в ajax.

Answer 1

Да, вы можете:

1. Записывать данные в буфер обмена, вставленные на веб-страницу
2. Загружать указанные данные куда-нибудь через HTTP
3. Отображать указанные данные какизображение на вашей веб-странице

Чтобы получить данные в буфере обмена, вы присоединяете прослушиватель событий для типа события «вставить».Событие генерируется в активном элементе документа и всплывает вверх по иерархии элементов к окну документа.

Объект ClipboardEvent, который передается прослушивателем событий, позволит вам получить фактические данные вбуфер обмена, текст и / или изображение:

addEventListener("paste", ev => {
    for(const item of ev.clipboardData.items) { /// Clipboard may contain multiple elements of different type -- text, image, etc
        if(item.type.startsWith("image/")) { /// We are only interested in clipboard data that is an image
            /// Do something with the data, image available as `item.getAsFile()`
        }
    }
});

Данные изображения будут доступны с item.getAsFile(), File (подкласс Blob).Вы можете загрузить BLOB-объект тривиально:

var xhr = new XMLHttpRequest();
xhr.open("PUT", "http://example.com");
xhr.send(item.getAsFile()); /// Send the image with HTTP somewhere

Вы также можете отобразить вставленное изображение, предполагая, что в вашем документе есть <img id="foobar">:

document.getElementById("foobar").src = URL.createObjectURL(item.getAsFile());

Answer 2

Вы можете использовать html2canvas , чтобы делать скриншоты и загружать их, используя JavaScript.

Используйте следующее, чтобы сделать скриншот текущего экрана:

html2canvas(document.body).then(function(canvas) {

});

, затем используйте canvas.toDataURL();, чтобы преобразовать изображение в base64 и загрузить.