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

最新推荐文章于 2023-09-12 14:10:53 发布

张虹旺

最新推荐文章于 2023-09-12 14:10:53 发布

阅读量598

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/hongwangzhang/article/details/50549577

版权

jQuery 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<!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>

张虹旺

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js利用clipboardData在网页中实现截屏粘贴的功能

copyimg #box{ width:200px; height:200px; border:1px solid #ddd; } 利用 clipboardData 在网页中实现截屏粘贴的功能 (function(){ var imgReader = function( item ){ v
复制链接

扫一扫

专栏目录