Javascript implements the function of reading the clipboard and pasting screenshots on a webpage _ javascript skills

This article mainly introduces how to read and paste the clipboard on a webpage, that is, you can paste the clipboard Ctrl + V into an input box on the webpage, such as QQ, trademanager, or other software, for more information, see the screenshot and Paste functions in the input box of a website.

Unfortunately, only the Chrome browser of a later version supports direct pasting. other browsers have not been pasted so far (IE11 has not been tested ), of course, this enhanced user experience function is always better than not.

The structure code of the input box:

The Code is as follows:

Bind a paste event to the input box:

The Code is as follows:

Var input = document. getElementById ('testinput ');

Input. addEventListener ('paste ', function (event ){
// Dosomething...
});

The Event interface object for pasting events provides a clipboardData interface, which stores the data in the system clipboard, as mentioned above, currently, only the Chrome browser of a later version can directly access the data on the system clipboard. This provides an entrance for directly interacting with images saved on the clipboard after screenshots are taken.

Screenshots are screenshots provided by QQ, screenshots provided by the PrtScn key provided by the system, or screenshots provided by other third-party software.

The Code is as follows:

Input. addEventListener ('paste ', function (event ){
// Interface for accessing the system clipboard added to the event object
Var clipboardData = event. clipboardData,
I = 0,
Items, item, types;

If (clipboardData ){
Items = clipboardData. items;

If (! Items ){
Return;
}

Item = items [0];
// Data type stored on the clipboard
Types = clipboardData. types | [];

For (; I <types. length; I ++ ){
If (types [I] === 'files '){
Item = items [I];
Break;
}
}

// Determine whether the image data is used
If (item & item. kind === 'file' & item. type. match (/^ image \/I )){
// Read the image
ImgReader (item );
}
}
});

You can use FileReader to read the image data from the clipboard.

The Code is as follows:

Var imgReader = function (item ){
Var file = item. getAsFile (),
Reader = new FileReader ();

// Read the file and display it on the webpage
Reader. onload = function (e ){
Var img = new Image ();

Img. src = e.tar get. result;
Document. body. appendChild (img );
};

// Read the file
Reader. readAsDataURL (file );
};

You can use the following source code to see the demo.

The Code is as follows:

Use clipboardData to paste screenshots on webpages




Use clipboardData to paste screenshots on webpages