网站地图    收藏   

主页 > 前端 > javascript >

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

来源:自学PHP网    时间:2014-09-19 14:47 作者: 阅读:

[导读] 本文章来给大家推荐一个不错的clipboardData 在网页中实现截屏粘贴代码哦,像我们QQ截屏都可以直接使用些方法了...

 代码如下 复制代码

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>利用 clipboardData 在网页中实现截屏粘贴的功能</title>
<style type="text/css">
#box{ width:200px; height:200px; border:1px solid #ddd; }
</style>
</head>
<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>

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论