注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

Jon的毛线球

叩首问路,码梦维生。

 
 
 

日志

 
 

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

2014-07-20 17:09:20|  分类: js |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

见某网站的输入框支持截屏粘贴的功能,觉得有点意思,于是将代码扒出来分享下。

可惜,目前仅有高版本的 Chrome 浏览器支持这样直接粘贴,其他浏览器目前为止还无法粘贴( IE11没测试过 ),当然这种增强型的用户体验功能有总比没有好。

输入框的结构代码:

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

为输入框绑定粘贴事件:

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

粘贴事件的 Event 接口对象提供了一个 clipboardData 接口,该接口就保存了系统剪贴板中的数据,如上面所说,目前只有高版本的 Chrome 浏览器能直接访问系统剪贴板的数据。这就给截屏后保存到剪贴板中的图片于网页直接进行交互提供了一个入口。

这里所说的截屏,就是 QQ 提供的截屏或者系统自带的 PrtScn 键的截屏功能,或者其他第三方软件提供的截屏功能。

01input.addEventListener( 'paste', function( event ){
02    // 添加到事件对象中的访问系统剪贴板的接口
03    var clipboardData = event.clipboardData,
04        i = 0,
05        items, item, types;
06         
07    if( clipboardData ){
08        items = clipboardData.items;
09         
10        if( !items ){
11            return;
12        }
13         
14        item = items[0];
15        // 保存在剪贴板中的数据类型
16        types = clipboardData.types || [];
17         
18        for( ; i < types.length; i++ ){
19            if( types[i] === 'Files' ){
20                item = items[i];
21                break;
22            }
23        }
24         
25        // 判断是否为图片数据
26        if( item && item.kind === 'file' && item.type.match(/^image\//i) ){
27            // 读取该图片           
28            imgReader( item );
29        }
30    }
31});

从剪贴板中取到了图片数据,就可以用 FileReader 对其进行读取了。

01var imgReader = function( item ){
02    var file = item.getAsFile(),
03        reader = new FileReader();
04     
05    // 读取文件后将其显示在网页中
06    reader.onload = function( e ){
07        var img = new Image();
08         
09        img.src = e.target.result;
10        document.body.appendChild( img );
11    };
12 
13    // 读取文件
14    reader.readAsDataURL( file );
15};
  评论这张
 
阅读(11)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017