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. git各种撤销操作

    撤销git add: git reset HEAD+路径 或者git reset --+路径 撤销commit: 1．回退到具体的嘻哈值 git reset --hard     2．回退后仍包含本地 ...

  2. poj1981Circle and Points(单位圆覆盖最多的点）

    链接 O(n^3)的做法: 枚举任意两点为弦的圆,然后再枚举其它点是否在圆内. 用到了两个函数 atan2反正切函数,据说可以很好的避免一些特殊情况 #include <iostream> ...

  3. 高处胜寒 php中奖概率算法，可用于刮刮卡，大转盘等抽奖算法

    <?php /* * 经典的概率算法, * $proArr是一个预先设置的数组, * 假设数组为:array(100,200,300,400), * 开始是从1,1000 这个概率范围内筛选第一 ...

  4. C语言语法之占用字节

    指针占用字节 指针即为地址,存的是变量的地址,在同一架构下地址长度都是相同的(cpu的最大寻址内存空间),所以不同类型的指针长度都一样. 指针占用几个字节跟语言无关,而是跟系统的寻址能力有关,16为地 ...

  5. POJ 2063 Investment 完全背包

    题目链接:http://poj.org/problem?id=2063 今天果然是卡题的一天.白天被hdu那道01背包的变形卡到现在还没想通就不说了,然后晚上又被这道有个不大也不小的坑的完全背包卡了好 ...

  6. 【linux 命令】：查看系统开机，关机时间【转载】

    转载原文:http://www.cnblogs.com/kerrycode/p/3759395.html 看Linux开机关机时间的方法(非常全面) 1: who 命令查看 who -b 查看最后一次 ...

  7. HA功能中ZKFC对NN状态的控制

    ZKFC : zookeeper FailoverController NN : name node Hadoop 2.0 HA架构图: FC是要和NN一一对应的,两个NN就要部署两个FC.它负责监控 ...

  8. 转！！Java垃圾回收机制

    1. 垃圾回收的意义 在C++中,对象所占的内存在程序结束运行之前一直被占用,在明确释放之前不能分配给其它对象:而在Java中,当没有对象引用指向原先分配给某个对象的内存时,该内存便成为垃圾.JVM的 ...

  9. XMPP 常见错误:(<failure xmlns=＂urn:ietf:params:xml:ns:xmpp-sasl＂><not-autho

    1检查jid XMPP认证的问题,一般都是与JID有关的,因此解决这类问题,首选的入口就是分析一下XMPPStream的JID,客户端在与服务器连接后,Socket就绑定了这个端口,用来处理与服务器的 ...

  10. iOS开发 字符串MD5加密

    /*** MD5 ***/ #define CC_MD5_DIGEST_LENGTH    16          /* digest length in bytes */ #define CC_MD ...