微信号:FrontDev

介绍:分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯

在网页中粘贴截图那些事儿

2017-01-03 19:32 前端大全

(点击上方公众号,可快速关注)


作者:郑武江(@OAuth_v2)  

链接:seejs.me/2016/11/30/paste-snapshot/

如有好文章投稿,请点击 → 这里了解详情


做这个尝试,只为了解决一个问题:如何在网页中读取剪贴板中的图片数据,并在页面中展示或保存到图片服务器。场景可以简单描述为,通过任意屏幕截图工具(QQ、旺旺,PrintScreen键等),截图之后网页中的文本框内粘贴(Ctrl+V、右键等),并在页面中使用图片数据。文字描述比较抽象,我们用一个gif图片来形象的展示一下效果:



ClipboardEvent(剪贴板事件)


ClipboardEvent 接口描述了与修改剪切板相关的事件,这些事件包括 cut 、copy 和 paste 事件。


先解决一个问题:为什么要说ClipboardEvent?


首先,无论是截图还是在网页中“复制图片”,最终都是将图片数据存储到了系统剪贴板中。其次,当执行“粘贴”操作的时候是将剪贴板中的数据读出来使用,而读取剪贴板中的图片(文件)数据,更需要直接使用paste事件完成。


第二个问题:为什么要在文本框中“粘贴”,是必须的吗?


先从paste事件来说,经测试paste事件可以绑定到任意HTML元素上的,并非必须使用文本框。再来猜测下使用场景,粘贴操作涉及到数据写入问题,内容不可能写入到页面中的只读区域,所以按常理来说,只可能是粘贴到页面中的可写区域。再者,最容易让人想到的场景便是一个聊天会话,因此首先想到的便是文本框控件。


功能实现


功能逻辑比较简单,截图完成或在网页中复制图片后,图片数据就保存到系统剪贴板上了。我们代码中需要实现的就是在paste事件中实现剪贴板中的图像数据读取和处理逻辑。拿到图像数据后,就可以根据自己的业务逻辑进行下一步操作了。代码如下:


(function() {

    var sender = document.getElementById('J_MsgSender'),

        list = document.getElementById('J_MsgList');

    function pasteImage(imgObj) {

        var file = imgObj.getAsFile ? imgObj.getAsFile() : imgObj, reader = new FileReader();

        // 读取文件后将其显示在网页中

        reader.onload = function(e) {

            var img = new Image(), p = document.createElement('p');

            img.src = e.target.result;

            p.appendChild(img);

            list.appendChild(p);

        };

    }

    sender.addEventListener('paste', function(ev) {

        // 通过事件对象访问系统剪贴板

        var ev = ev || window.event, clipboardData = ev.clipboardData,

            i = 0, items, item, files;

        if (clipboardData) {

            items = clipboardData.items;

            files = clipboardData.files;

 

            if (files && files.length) {

                pasteImage(files[0]);

                return;

            }

            if (!items) { return; }

 

            for (; i < items.length; i++) {

                if (items[i].kind === 'file' && items[i].type.match(/^image\//i)) {

                    item = items[i];

                    break;

                }

            }

            // 如果存在图片数据

            if (item) {

                pasteImage(item); // 读取该图片

            }

        }

    });

})();


代码很简单,但有些细节需要注意。在MDN的paste事件说明文档中有说明,数据是存放在事件对象的clipboardData属性中的。而在对clipboardData(DataTransfer类型)的说明中,文件类型的数据应该是被存放在files属性中。这一点在使用拖拽上传等情况时确实是这样的,但是在对截图和复制的网页图片的处理上,各浏览器的实现似乎出现了差异。


在Chrome浏览器中,从剪贴板读取文件时,files属性中并没有内容,而在items属性中却可以找到。而在Firefox中,files属性中存在图片数据,而在items中却找不到文件类型的数据。因此,我不得不在上示代码中做了存在性判断,增加了额外的逻辑。


此外,IE浏览器对剪贴板的处理比较特殊,它将剪贴板数据放在了window作用域下,通过window.clipboardData对剪贴板数据进行操作。但在IE Edge中测试,并未对截图数据进行成功读取,暂不做描述。


其他


如上代码所示,当clipboardData对象中的files属性中没有数据时,我们可以通过遍历items中的元素,并通过元素的kind和type属性判断元素类型,最后通过getAsFile方法将元素转换为文件类型。


其实除了getAsFile方法,还有一个类似的方法,可以将元素转换成字符串,用法示例如下:


item.getAsString(function(str) {

    console.log(str);

});


该方法可以根据复制源的不同,转换出包含文本格式(比如:字体、字号等)的字符串,如图:



对于文本类型的处理,相信是非常有用的一个方法。


结束语


目前,剪贴板事件还是试验中的功能,在后续的标准文档中可能被修改。我们在实际使用中应该做好兼容处理,附兼容性参考、在线演示。



觉得本文对你有帮助?请分享给更多人

关注「前端大全」,提升前端技能

 
前端大全 更多文章 唯快不破:Web 应用的 13 个优化步骤 微软笔试题:如何实现一个 LazyMan 程序员为什么要时刻保持危机感? 9 款极佳的 JS 移动应用程序开发框架 </2016><2017> 来自前端的特别祝福
猜您喜欢 为什么大数据领导者必须考虑物联网安全 如何建立数学模型估算日活用户数? 经验总结 | 最有效的R学习路径(一) Go 性能优化技巧 5\/10 如何录制喜欢的电视节目