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. CentOS6.4_常用命令

    1. 查看本机是否安装了 xxx软件,以及 xxx软件 的版本信息等: rpm -qa |grep  xxx(xxx代表软件名) 2. rpm -ivh 要安装的rpm文件包 3. 不care依赖项的 ...

  2. 在SSH框架中使用Spring的好处

    在SSH框假中spring充当了管理容器的角色.我们都知道Hibernate用来做持久层,因为它将JDBC做了一个良好的封装,程序员在与数据库进行交互时可以不用书写大量的SQL语句.Struts是用来 ...

  3. Docker-利用dockerfile来搭建tomcat服务

    在前面的例子中,我们从下载镜像,启动容器,在容器中输入命令来运行程序,这些命令都是手工一条条往里输入的,无法重复利用,而且效率很低.所以就需要一 种文件或脚本,我们把想执行的操作以命令的方式写入其中, ...

  4. 巧妙的实现 CSS 斜线(炫酷的小效果)

      开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果 ...

  5. (三)结构体指针、sizeof

    (一)结构体指针定义 今天上班写了一段测试代码,结果在linux下编译出现段错误,刚开始一直找不到原因,后来找了度娘才搞懂了.我先贴出来第一次写的代码以及gcc编译器下报的错误: #include&l ...

  6. VisualSVN官网

    VisualSVN是一款图形化svn服务器. http://www.visualsvn.com/

  7. 20160805_CentOS6_控制台切换

    1. Ctrl + Alt + F1~F6 Ctrl + Alt + F1 是 图形界面(如果装了的话),后面的是 控制台界面 2. 3.

  8. Machine Learning - 第3周（Logistic Regression、Regularization）

    Logistic regression is a method for classifying data into discrete outcomes. For example, we might u ...

  9. 快速开始使用Graph-tool - gt文件格式

    gt文件格式 gt文件格式是一种简单的二进制格式,用来存储graph-tool的图实例,以一个紧凑和快速的方式,包括了库支持所有类型的属性映射. 它是graphml格式(基于文本)的另一种选择,gra ...

  10. mac 下 parallels 虚拟机 ubuntuServer 安装 parallels tools

    mac 下 parallels 虚拟机 ubuntuServer 安装 parallels tools 1. 先点击ubuntu 虚拟机右下角的设置 -----安装 parallels tools - ...