I saw that the input box of a certain website supports screenshot and paste function, and I found it interesting, so I dug out the code and shared it.
Unfortunately, only the higher version of Chrome browser supports direct pasting, and other browsers have not been able to paste so far (IE11 has not been tested). Of course, this enhanced user experience function is better than none.
The structure code of the input box:
The code copy is as follows:
<input type="text" id="testInput" />
Bind paste events for the input box:
The code copy 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 saves the data in the system clipboard. As mentioned above, only higher versions of Chrome browsers can directly access the data of the system clipboard. This provides an entrance for the pictures saved to the clipboard to interact directly on the web page after screenshot.
The screenshot mentioned here is the screenshot provided by QQ or the screenshot function of the PrtScn key provided by the system, or the screenshot function provided by other third-party software.
The code copy is as follows:
input.addEventListener( 'paste', function( event ){
// The interface to access 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 saved in the clipboard
types = clipboardData.types || [];
for( ; i < types.length; i++ ){
if( types[i] === 'Files' ){
item = items[i];
break;
}
}
// Determine whether it is picture data
if( item && item.kind === 'file' && item.type.match(/^image///i) ){
// Read the picture
imgReader( item );
}
}
});
After getting the image data from the clipboard, you can use FileReader to read it.
The code copy is as follows:
var imgReader = function( item ){
var file = item.getAsFile(),
reader = new FileReader();
// After reading the file, it will be displayed on the web page
reader.onload = function( e ){
var img = new Image();
img.src = e.target.result;
document.body.appendChild( img );
};
// Read the file
reader.readAsDataURL( file);
};
The very short code is implemented, you can use the following source code to see the demonstration.
The code copy is as follows:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Use clipboardData to implement screenshot and paste functions in web pages</title>
<style type="text/css">
#box{ width:200px; height:200px; border:1px solid #ddd; }
</style>
</head>
<body>
<h1>Use clipboardData to implement screenshot and paste functions in web pages</h1>
<hr />
<div><input type="text" id="testInput" placeholder="Paste in the input box after screenshot" 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.target.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>