google出来一个html2canvas，它利用canvas来渲染读取的DOM树，也就是说它只能截取document里的内容，如果要像qq截图那样，应该怎么做？用过百度的Ueditor编辑器的朋友都知道，它是调用了一个exe插件来实现的，由于本人内功不足还不会用c++写一个截屏插件出来，谷歌度娘参考了一番就取巧用js访问剪切板，获取到不管是qq还是系统剪切的图片数据。

　　输入框的结构代码：

    <iframe seamless ng-snapscreen id="dialogEditor" scrolling="no" autofocus placeholder="请输入">

    </iframe>

　　设置iframe：

var _frame = document.getElementById("dialogEditor");

var _window = _frame.contentWindow;

_window.document.designMode="on";//设置为设计模式，就可以填写内容了

_window.document.canHaveHTML=true;//可以包含HTML

　　绑定粘贴事件：

    iframbody.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 );

                }

            }

        });

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

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

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

var imgReader = function( item ){

            var blob = item.getAsFile(),

                reader = new FileReader();

            reader.onload = function( e ){

                var img = new Image();

                img.src = e.target.result;

                img.className = 'snapimg';

                img.style.maxWidth = '80px';

                img.style.maxHeight = '60px';

                //document.body.appendChild( img );

                iframbody.appendChild( img );

            };

            reader.readAsDataURL( blob );

        };

　　这是一个简单的演示：

<!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>

JS访问剪切板中的图片的更多相关文章

  1. JS从剪切板里粘贴图片

    功能需求:在网页中,Ctrl+V,把系统剪切板的图片(比如QQ截图)进行粘贴.显示.上传...,提高用户体验. 参考链接:https://ruby-china.org/topics/17266 git ...

  2. 经验分享：计算机 web 浏览器——访问剪切板图片

      有时候,我们希望能访问用户的剪切板,来实现一些方便用户的功能:但是另一方面,剪切板里的数据对用户来说又是非常隐私的,所以浏览器在获取信息方面有安全限制,同时也提供访问接口. 当我们需要实现在富文本 ...

  3. 浏览器中用JavaScript获取剪切板中的文件

    本文转自我的个人网站  , 原文地址:http://www.zoucz.com/blog/2016/01/29/get-file-from-clipboard/  ,欢迎前往交流讨论 在网页上编辑内容 ...

  4. Winform中实现将照片剪贴到系统剪切板中(附代码下载)

    场景 效果 点击剪切按钮 点击粘贴按钮 注: 博客主页: https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书.教程推送与免 ...

  5. chrome浏览器下JavaScript实现clipboard时无法访问剪切板解决方案

    在用JavaScript实现某个简单的复制到剪切板功能的时候,会考虑一下浏览器兼容性,主要是重点在IE和FireFox,把这个两个浏览器搞定后,基本上其他浏览器也不用太操心了,Chrome也一样,没出 ...

  6. wpf 复制/剪切到本地系统剪切板中以供右键粘贴用

    原文:wpf 复制/剪切到本地系统剪切板中以供右键粘贴用   http://www.cnblogs.com/yhdkzy/archive/2012/11/27/2790655.html   /// & ...

  7. python学习记录_中断正在执行的代码,执行剪切板中的代码,键盘快捷键,魔术命令,输入和输出变量,记录输入和输出变量_

    2018-03-28 00:56:39 中断正在执行的代码 无论是%run执行的脚本还是长时间运行的命令ctrl + cIn [1]: KeyboardInterrupt 执行剪切板中的代码 ctrl ...

  8. Mac剪切板中的PNG保存到文件swift

    SwiftGG 教程大全 中文翻译 命令行工具开发教程 Line Programs on macOS Tutorial swift4,较详细 Swift基础中需要注意的点 NSPasteboard M ...

  9. Python访问剪切板

    剪切板访问工具 ----pyperclip he purpose of Pyperclip is to provide a cross-platform Python module for copyi ...

随机推荐

  1. 百度之星复赛Astar Round3

    拍照 树状数组(SB了).求出静止状态下,每个点能看到多少个向右开的船c1[i],多少个向左开的船c2[i]. max{c1[i] + c2[j], (满足i <= j)  }即为答案.从后往前 ...

  2. 理解odbc

    1.解决什么样的问题?不同的数据库产品,具有不同的特性,也就是方言.因此应用程序针对不同的数据库产品,编写不同的代码.如果换了一个数据库产品,还需要重新编写数据库交互部分,不具备扩展和移植.odbc对 ...

  3. Oracle 中union的用法

    UNION 指令的目的是将两个 SQL 语句的结果合并起来,可以查看你要的查询结果. 例如: SELECT Date FROM Store_Information UNION SELECT Date ...

  4. 题目:在泛型为Integer的容器内添加一个字符串.

    这个题目有两种解法,第一种利用反射来解决: //ArrayList<Integer> list = new ArrayList<Integer>(); //在这个泛型为Inte ...

  5. Android Loader详解

    装载器从android3.0开始引进.它使得在activity或fragment中异步加载数据变得简单.装载器具有如下特性: 它们对每个Activity和Fragment都有效. 他们提供了异步加载数 ...

  6. 转：浅谈C/C++中的指针和数组（一）

    再次读的时候实践了一下代码,结果和原文不一致 error C2372: 'p' : redefinition; different types of indirection 不同类型的间接寻址 /// ...

  7. Mvc4_传值取值应用

    Mvc路由运行机制:   首先,Web 浏览器向服务器发送一条URL 请求,如http://HostName/ControllerName/ActionName/Parameters. 其次,请求被A ...

  8. table合并单元格colspan和rowspan .

    colspan和rowspan这两个属性用于创建特殊的表格. colspan是“column span(跨列)”的缩写.colspan属性用在td标签中,用来指定单元格横向跨越的列数: 在浏览器中将显 ...

  9. ajax 动态获取json的例子

    1.前台脚本: //用于切换图片列表的ajax function changePhoto(title,hotelId){ $.ajax({ contentType: "application ...

  10. noip赛前小结4

    真正的勇士,敢于面对惨淡的人生. 真正的OIer,敢于做ccop的题. 有种凄凉叫做这道数学题已经超出了我语文的理解范围. 有种愤怒叫做ccop类的信息题已经超出了我语文的理解范围和数学的理解范围. ...