Home > Developer > JavaScript
See the input box of a website that supports the screenshot and paste function. I think it is a bit interesting, so I will pull out the code and share it.
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:
Copy codeThe Code is as follows:
<Input type = "text" id = "testInput"/>
Bind a paste event to the input box:
Copy codeThe 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.
Copy codeThe 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.
Copy codeThe 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.
Copy codeThe Code is as follows:
<! Doctype html>
<Html lang = "en-US">
<Head>
<Meta charset = "UTF-8">
<Title> Use clipboardData to paste screenshots on a webpage </title>
<Style type = "text/css">
# Box {width: 200px; height: 200px; border: 1px solid # ddd ;}
</Style>
</Head>
<Body>
<H1> Use clipboardData to paste screenshots on a webpage <Hr/>
<Div> <input type = "text" id = "testInput" placeholder = "screenshot and paste it into the input box" size = "30"/> </div>
<Script type = "text/javascript">
(Function (){
Var imgReader = function (item ){
Var blob = item. getAsFile (),
Reader = new FileReader ();
Reader. onload = function (e ){
Var img = new Image ();
Img. src = e.tar get. result;
Document. body. appendChild (img );
};
Reader. readAsDataURL (blob );
};
Document. getElementById ('testinput'). addEventListener ('paste ', function (e ){
Var clipboardData = e. clipboardData,
I = 0,
Items, item, types;
If (clipboardData ){
Items = clipboardData. items;
If (! Items ){
Return;
}
Item = items [0];
Types = clipboardData. types | [];
For (; I <types. length; I ++ ){
If (types [I] === 'files '){
Item = items [I];
Break;
}
}
If (item & item. kind === 'file' & item. type. match (/^ image \/I )){
ImgReader (item );
}
}
});
})();
</Script>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
