Community Learn Tools Library Leisure
search
English
Home > Web Front-end > JS Tutorial > body text

JavaScript implements the function of reading the clipboard and pasting screenshots in the web page_javascript skills

WBOY
Release： 2016-05-16 16:45:38
Original
1954 people have browsed it

I saw that the input box of a website supports the function of taking screenshots and pasting them. I thought it was interesting, so I took out the code and shared it.

Unfortunately, currently only higher versions of the Chrome browser support direct pasting in this way, and other browsers are currently unable to paste (IE11 has not been tested). Of course, this enhanced user experience function is better than nothing.

Structure code of the input box:

Copy code The code is as follows:


Bind the paste event to the input box:

Copy code The code is as follows:

var input = document.getElementById( 'testInput' );

input.addEventListener( 'paste', function( event ){
// dosomething...
});

The Event interface object of the paste event provides a clipboardData interface, which saves the data in the system clipboard. As mentioned above, currently only higher versions of the Chrome browser can directly access the data in the system clipboard. This provides an entrance for direct interaction with the web page after taking a screenshot and saving the image to the clipboard.

The screenshot mentioned here refers to the screenshot provided by QQ or the screenshot function of the PrtScn key that comes with the system, or the screenshot function provided by other third-party software.

Copy code The code is as follows:

input.addEventListener( 'paste', function( event ) {
// Interface added to the event object to access the system clipboard
var clipboardData = event.clipboardData,
i = 0,
items, item, types;

if( clipboardData ){
items = clipboardData.items;

if( !items ){
return;
}

item = items[0];
                    // Data types saved in the clipboard i] === 'Files' ){
                  item = items[i];                                                                                                                                                                        🎜> if ( item && item.kind === 'file' && item.type.match(/^image//i) ){
                                                                                                                                                                      🎜> }
});



After getting the image data from the clipboard, you can use FileReader to read it.





Copy code


The code is as follows:
var imgReader = function( item ){

var file = item.getAsFile(),

reader = new FileReader();

// Read the file and display it on the web page reader.onload = function( e ){ var img = new Image(); img.src = e.target.result; document.body.appendChild( img ); };
// Read file
reader.readAsDataURL( file );
};




It can be implemented with a very short code. You can use the following source code to see the demonstration.



Copy code


The code is as follows:





< ;title>Use clipboardData to implement the function of screenshot and pasting in web pages




Use clipboardData to realize the screenshot and paste function in the webpage< /h1> 

Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template

Public welfare online PHP training，Help PHP learners grow quickly！

About us Disclaimer Sitemap

© php.cn All rights reserved