Javascript in the web page to achieve clipboard paste screenshot function

2020-03-30 03:17:33
OfStack

Input box structure code:


<input type="text" id="testInput" />

Bind and paste the event for the input box:


var input = document.getElementById( 'testInput' );
input.addEventListener( 'paste', function( event ){
    // dosomething...
});

The Event interface object for pasting events provides a clipboardData interface that holds the data in the system clipboard, which, as mentioned above, is currently only directly accessible by advanced Chrome browsers. This provides an entry point for images saved to the clipboard after screenshots to interact directly with the web page.

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


input.addEventListener( 'paste', function( event ){
    //The 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 stored in the clipboard
        types = clipboardData.types || [];

        for( ; i < types.length; i++ ){
            if( types[i] === 'Files' ){
                item = items[i];
                break;
            }
        }

        //Determine if it is picture data
        if( item && item.kind === 'file' && item.type.match(/^image//i) ){
            //Read the picture & NBSP;                    
            imgReader( item );
        }
    }
});

Once the image data is retrieved from the clipboard, it can be read with FileReader.


var imgReader = function( item ){
    var file = item.getAsFile(),
        reader = new FileReader();

    //The file is read and 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 );
};

Very short code to achieve, you can use the following source code to see the demo.


<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title> using  clipboardData  In the web page to achieve screenshot paste function </title>
<style type="text/css">
#box{ width:200px; height:200px; border:1px solid #ddd; }
</style>
</head>
<body>

<h1> using  clipboardData  In the web page to achieve screenshot paste function </h1>   
<hr />
<div><input type="text" id="testInput" placeholder=" Paste the screenshot 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.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>