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继承的实现
Oct 24 Javascript
在JavaScript中使用inline函数的问题
Mar 08 Javascript
jquery实现metro效果示例代码
Sep 06 Javascript
jQuery选择器简明总结(含用法实例,一目了然)
Apr 25 Javascript
javascript自定义的addClass()方法
May 28 Javascript
JSON字符串和对象之间的转换详解
May 26 Javascript
JavaScript程序中实现继承特性的方式总结
Jun 24 Javascript
基于jQuery实现表格的查看修改删除
Aug 01 Javascript
JS中位置与大小的获取方法
Nov 22 Javascript
JS与HTML结合实现流程进度展示条思路详解
Sep 03 Javascript
Vue中函数防抖节流的理解及应用实现
Apr 24 Javascript
vue动态设置页面title的方法实例
Aug 23 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
php做下载文件的实现代码及文件名中乱码解决方法
2011/02/03 PHP
php数组键值用法实例分析
2015/02/27 PHP
Smarty使用自定义资源的方法
2015/08/08 PHP
CI框架数据库查询缓存优化的方法
2016/11/21 PHP
PHP排序二叉树基本功能实现方法示例
2018/05/26 PHP
Yii2 queue的队列使用详解
2019/07/19 PHP
用js判断浏览器是否是IE的比较好的办法
2007/05/08 Javascript
jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动
2014/03/27 Javascript
javascript操纵OGNL标签示例代码
2014/06/16 Javascript
javascript使用正则控制input输入框允许输入的值方法大全
2014/06/19 Javascript
基于Jquery代码实现支持PC端手机端幻灯片代码
2015/11/17 Javascript
基于Jquery和html5实现炫酷的3D焦点图动画
2016/03/02 Javascript
jQuery中 $ 符号的冲突问题及解决方案
2016/11/04 Javascript
BootStrap表单控件之复选框checkbox和单选择按钮radio
2017/05/23 Javascript
vue.js vue-router如何实现无效路由(404)的友好提示
2017/12/20 Javascript
Angular5升级RxJS到5.5.3报错:EmptyError: no elements in sequence的解决方法
2018/04/09 Javascript
React 全自动数据表格组件——BodeGrid的实现思路
2019/06/12 Javascript
环形加载进度条封装(Vue插件版和原生js版)
2019/12/04 Javascript
JavaScript布尔运算符原理使用解析
2020/05/06 Javascript
JavaScript onclick事件使用方法详解
2020/05/15 Javascript
vue element和nuxt的使用技巧分享
2021/01/14 Vue.js
介绍Python中的__future__模块
2015/04/27 Python
深入浅析Python中join 和 split详解(推荐)
2016/06/30 Python
python2.7到3.x迁移指南
2018/02/01 Python
Python重新加载模块的实现方法
2018/10/16 Python
django与vue的完美结合_实现前后端的分离开发之后在整合的方法
2019/08/12 Python
python装饰器的特性原理详解
2019/12/25 Python
基于Python爬取51cto博客页面信息过程解析
2020/08/25 Python
torchxrayvision包安装过程(附pytorch1.6cpu版安装)
2020/08/26 Python
python3代码输出嵌套式对象实例详解
2020/12/03 Python
python抢购软件/插件/脚本附完整源码
2021/03/04 Python
详解如何解决使用JSON.stringify时遇到的循环引用问题
2021/03/23 Javascript
土木工程毕业生推荐信
2013/10/28 职场文书
聚美优品励志广告词
2014/03/14 职场文书
高三生物教学反思
2016/02/22 职场文书
SpringBoot读取Resource下文件的4种方法
2021/07/02 Java/Android