javascript在网页中实现读取剪贴板粘贴截图功能


Posted in Javascript onJune 07, 2014

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

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

输入框的结构代码:

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

为输入框绑定粘贴事件:

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

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

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

input.addEventListener( 'paste', function( event ){
    // 添加到事件对象中的访问系统剪贴板的接口
    var clipboardData = event.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 );
        }
    }
});

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

var imgReader = function( item ){
    var file = item.getAsFile(),
        reader = new FileReader();    // 读取文件后将其显示在网页中
    reader.onload = function( e ){
        var img = new Image();
        img.src = e.target.result;
        document.body.appendChild( img );
    };

    // 读取文件
    reader.readAsDataURL( file );
};

很短的代码就实现了,可以使用以下源码看看演示。

<!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>
Javascript 相关文章推荐
javascript随机将第一个dom中的图片添加到第二个div中示例
Oct 08 Javascript
javascript 密码框防止用户粘贴和复制的实现代码
Feb 17 Javascript
jQuery中noconflict函数的实现原理分解
Feb 03 Javascript
jQuery取得iframe中元素的常用方法详解
Jan 14 Javascript
浅谈jQuery animate easing的具体使用方法(推荐)
Jun 17 Javascript
微信小程序 下拉菜单的实现
Apr 06 Javascript
Vue原理剖析 实现双向绑定MVVM
May 03 Javascript
详解vantUI框架在vue项目中的应用踩坑
Dec 06 Javascript
使用weixin-java-miniapp配置进行单个小程序的配置详解
Mar 29 Javascript
layui 根据后台数据动态创建下拉框并同时默认选中的实例
Sep 02 Javascript
js找出5个数中最大的一个数和倒数第二大的数实现方法示例小结
Mar 04 Javascript
手把手教你如何编译打包video.js
Dec 09 Javascript
JavaScript异步回调的Promise模式封装实例
Jun 07 #Javascript
jQuery的缓存机制浅析
Jun 07 #Javascript
Firefox中使用outerHTML的2种解决方法
Jun 07 #Javascript
jQuery 顶部导航跟随滚动条滚动固定浮动在顶部
Jun 06 #Javascript
判断iframe里的页面是否加载完成
Jun 06 #Javascript
javascript获取隐藏元素(display:none)的高度和宽度的方法
Jun 06 #Javascript
js中的hasOwnProperty和isPrototypeOf方法使用实例
Jun 06 #Javascript
You might like
一个显示天气预报的程序
2006/10/09 PHP
PHP微信开发之查询微信精选文章
2016/06/23 PHP
php操作路径的经典方法(必看篇)
2016/10/04 PHP
PHP实现浏览器中直接输出图片的方法示例
2018/03/14 PHP
关于Laravel参数验证的一些疑与惑
2019/11/19 PHP
使用prototype.js 的时候应该特别注意的几个问题.
2007/04/12 Javascript
javascript网页关闭时提醒效果脚本
2008/10/22 Javascript
jQuery 剧场版 你必须知道的javascript
2009/05/27 Javascript
javascript入门基础之私有变量
2010/02/23 Javascript
js String对象中常用方法小结(字符串操作)
2012/01/27 Javascript
javascript 事件处理程序介绍
2012/06/27 Javascript
Javascript的各种节点操作实例演示代码
2012/06/27 Javascript
IE下JS读取xml文件示例代码
2013/08/05 Javascript
jQuery设置与获取HTML,文本和值的简单实例
2014/02/26 Javascript
js操作输入框中选择内容兼容IE及其他主流浏览器
2014/04/22 Javascript
Extjs的FileUploadField文件上传出现了两个上传按钮
2014/04/29 Javascript
jquery常用方法及使用示例汇总
2014/11/08 Javascript
AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录
2015/01/02 Javascript
JS实现从连接中获取youtube的key实例
2015/07/02 Javascript
jQuery插件zTree实现获取当前选中节点在同级节点中序号的方法
2017/03/08 Javascript
Node.js安装配置图文教程
2017/05/10 Javascript
ng-repeat指令在迭代对象时的去重方法
2018/10/02 Javascript
JavaScript学习笔记之图片库案例分析
2019/01/08 Javascript
python判断图片宽度和高度后删除图片的方法
2015/05/22 Python
Python实现的简单模板引擎功能示例
2017/09/02 Python
Django中反向生成models.py的实例讲解
2018/05/30 Python
python字典一键多值实例代码分享
2019/06/14 Python
tensorboard 可以显示graph,却不能显示scalar的解决方式
2020/02/15 Python
解决python虚拟环境切换无效的问题
2020/04/30 Python
Html5百叶窗效果的示例代码
2017/12/11 HTML / CSS
优秀党支部书记事迹材料
2014/05/29 职场文书
秋冬农业生产标语
2014/10/09 职场文书
2015年图书馆个人工作总结
2015/05/26 职场文书
劳动模范获奖感言
2015/07/31 职场文书
2016年小学“公民道德宣传日”活动总结
2016/04/01 职场文书
如何使用Python对NetCDF数据做空间相关分析
2021/04/21 Python