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. Data Science 和 Finance 两个领域的融合是什么样子的？

    Data Science 和 Finance 两个领域的融合是什么样子的? 2015-05-24 董可人 现在大部分人所说的Quant一般是指各大投行里做衍生品定价,信用评估,风险控制之类工作的人,这 ...

  2. thinkphp ajax 无刷新分页效果的实现

    思路:先做出传统分页效果,然后重新复制一份Page.class.php类,对它进行修改,把js中的函数传到page类中,把上一页.下一页.首页.尾页.链接页中的url地址改成js控制的函数,模板页面中 ...

  3. Java的加密与解密

    package com.wangbo.util; import java.security.Key; import java.security.Security; import javax.crypt ...

  4. iOS开发之 在release版本禁止输出NSLog内容

    因为NSLog的输出还是比较消耗系统资源的,而且输出的数据也可能会暴露出App里的保密数据,所以发布正式版时需要把这些输出全部屏蔽掉. 我们可以在发布版本前先把所有NSLog语句注释掉,等以后要调试时 ...

  5. web前端学习(一） html+js实现文本框背景及只读属性修改

    因为工作需求接触了html+javascript,对于从事嵌入式开发,一直接触c和汇编的我,感觉这种语言是一个的全新的领域,宽松的语法要求,等同于文本逻辑的输出,当然我并不认为它简单,错误检查的缺少让 ...

  6. NowCoder猜想（素数筛法+位压缩）

    在期末被各科的大作业碾压快要窒息之际,百忙之中抽空上牛客网逛了逛,无意中发现一道好题,NowCoder猜想,题意很明显,就是个简单的素数筛法,但竟然超内存了,我晕(+﹏+)~  明明有 3 万多 k ...

  7. linux 文件类型 文件权限

    linux中常见的文件类型有: “—”表示普通文件 :-rw-r--r-- 1 root root 41727 07-13 02:56 install.log   “d”表示目录 :drwxr-xr- ...

  8. android源码解析（十七）-->Activity布局加载流程

    版权声明:本文为博主原创文章,未经博主允许不得转载. 好吧,终于要开始讲讲Activity的布局加载流程了,大家都知道在Android体系中Activity扮演了一个界面展示的角色,这也是它与andr ...

  9. Android_用户界面概述和数据单位

    一.UI界面概述 UI,对于一个应用而言用户界面是非常重要的一部分,是应用的脸,用户对应用第一个印象来自于界面,因此如果没有完美的用户界面,很难留住用户. 好的用户界面会极大提高用户的使用欲望并维护客 ...

  10. CTEX里的函数、符号及特殊字符

    CTEX里的函数.符号及特殊字符 声调 语法 效果 语法 效果 语法 效果 \bar{a}   \acute{a}   \check{a}   \grave{a}   \tilde{a}   \hat ...