js利用clipboardData在网页中实现截屏粘贴的功能

最新推荐文章于 2024-09-13 22:26:56 发布

原创最新推荐文章于 2024-09-13 22:26:56 发布 · 661 阅读

0 ·

CC 4.0 BY-SA版权

jQuery 专栏收录该内容

16 篇文章

订阅专栏

本文详细介绍了如何使用JavaScript和Clipboard API在网页中实现截屏粘贴的功能，包括创建输入框用于接收粘贴内容，并通过读取剪贴板数据实现图片的实时预览和显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>copyimg</title>

    <style type="text/css">
        #box{ width:200px; height:200px; border:1px solid #ddd; }
    </style>

</head>

<script language="JavaScript">


</script>

<body>
<h1>利用 clipboardData 在网页中实现截屏粘贴的功能</h1>
<hr />
<div><input type="text" id="testInput" placeholder="截屏后粘贴到输入框中" 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>