雨夜带刀's Blog

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

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

可惜,目前仅有高版本的 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 );
};

很短的代码就实现了,可以猛戳这里看看演示。

原载于:雨夜带刀’s Blog
本文链接:http://stylechen.com/clipboarddata.html
如需转载请以链接形式注明原载或原文地址。

“利用 clipboardData 在网页中实现截屏粘贴的功能”目前已有 7 条评论

发表评论:

  • *
  • *
头像

雨夜带刀

前端开发工程师,技术宅,现居北京。

雨夜带刀的开源项目

easy.js
一个简洁的 JavaScript 类库,集成了模块加载器,同时也有包含了常见的的组件库,可访问项目网站
seed
符合 AMD 规范的 JavaScript 模块加载器。
ecope
从 easy.js 组件库中移值过来的基于 jQuery 的组件库,简单实用,API 风格统一。