Can I take a screenshot from the clipboard?

Question

Can I take a screenshot from the clipboard, send it to ajax and put it in an <img> tag?

For example,

I have this form:

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

I need it! People are asking for screenshots from the clipboard.

If the screen stays in the clipboard in code base64, I make it to a picture in PHP.

I only don't know, how I can take a screenshot from the clipboard and send it to ajax.

Question is unclear, Do you have base64 and want to upload to server or , you need to create one and upload ? — Atul Sharma, Apr 07 '19 at 13:25
I don't understand what you want with the clipboard, if you want to evidently capture an image of your entire screen (which can be obtained through use of `navigator.mediaDevices.getDesktopMedia()`)? Anyways, what you capture does not really matter, as either can be sent with HTTP somewhere (what you call "send to AJAX"). And if you have your answer, mark it as such. If not, pay attention to the fact that your question has been deemed unclear and you may want to clarify by editing it. Also, welcome to Stack Overflow, sorry you met a pedant (me) :) — Armen Michaeli, Apr 08 '19 at 19:09

Armen Michaeli · Answer 1 · 2019-04-07T19:13:52.173

Yes, you can:

Capture data in the clipboard as pasted within your Web page
Upload said data somewhere via HTTP
Display said data as an image within your Web page

To obtain data in the clipboard you attach an event listener for the "paste" event type. The event is fired on the active document element and bubbles all the way upwards the element hierarchy towards the document window.

The ClipboardEvent object that your event listener is passed, will let you obtain the actual data in the clipboard, text and/or image:

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()`
        }
    }
});

The image data would be available with item.getAsFile(), a File (subclass of Blob). You can upload the blob trivially:

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

You can also display the pasted image, assuming you have <img id="foobar"> somewhere in your document:

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

score 0 · Answer 2 · edited Apr 08 '19 at 19:14

0

You can use html2canvas, to take screenshots and upload them, all using JavaScript.

Use the following to take screenshot of current screen:

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

});

then use canvas.toDataURL(); to convert image to base64 and upload.

edited Apr 08 '19 at 19:14

Armen Michaeli

8,625
8
58
95

answered Apr 07 '19 at 13:23

Atul Sharma

9,397
10
38
65

yeap, it work, but I think do it with textarea or anithing alse, how in any texteditors. But I now think its imposible in JS – Dmitrii P Apr 07 '19 at 14:02
`canvas.toDataURL();` you can assign the base64 value generated in textarea and push to server while submit. – Atul Sharma Apr 07 '19 at 17:49
Its incredibly, its workin, thx!!! but its working only on the page where use this script. Its not working if I take picture from the deskop or anywhere(( I use – Dmitrii P Apr 08 '19 at 05:40
Yes, this will work only in browser window. You can check this if you want to upload image from desktop screenshot `https://stackoverflow.com/questions/490908/paste-an-image-from-clipboard-using-javascript` – Atul Sharma Apr 08 '19 at 05:42

Can I take a screenshot from the clipboard?

2 Answers2