javascript在网页中实现读取剪贴板粘贴截图功能

见某网站的输入框支持截屏粘贴的功能，觉得有点意思，于是将代码扒出来分享下。

可惜，目前仅有高版本的 Chrome 浏览器支持这样直接粘贴，其他浏览器目前为止还无法粘贴( IE11没测试过 )，当然这种增强型的用户体验功能有总比没有好。

输入框的结构代码：


代码如下:

<input type="text" id="testInput" />

为输入框绑定粘贴事件：

代码如下:

var input = document.getElementById( 'testInput' );

input.addEventListener( 'paste', function( event ){
    // dosomething...
});

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

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


代码如下:

input.addEventListener( 'paste', function( event ){
    // 添加到事件对象中的访问系统剪贴板的接口
    var clipboardData = event.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 );
        }
    }
});

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

代码如下:

var imgReader = function( item ){
    var file = item.getAsFile(),
        reader = new FileReader();

// 读取文件后将其显示在网页中
    reader.onload = function( e ){
        var img = new Image();

img.src = e.target.result;
        document.body.appendChild( img );
    };

// 读取文件
    reader.readAsDataURL( file );
};

很短的代码就实现了，可以使用以下源码看看演示。

代码如下:

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

赞 (0)

相关推荐

  • JS实现div模块的截图并下载功能

    JS实现div模块的截图并下载功能

    当需要实现html页面部分模块截图并具有保存图片功能时,前台直接生成截图并下载会方便的多.多的不说,直接看代码 首先我们需要引入2个js文件: <script type="text/javascript" src="js/html2canvas.js"></script> <script type="text/javascript" src="js/jquery-1.12.3.min.js">

  • JavaScript+html5 canvas实现本地截图教程

    JavaScript+html5 canvas实现本地截图教程

    最近有时间了解了下html5的各API,发现新浪微博的头像设置是使用canvas实现截图的,加之前段时间了解了下html5的File API使用File API 之FileReader实现文件上传<JavaScript File API文件上传预览>,更加觉得html5好玩了,想着也试试写写这功能权当学习canvas吧. 下面奉上我自己写的一个demo,代码写得比较少,很多细节不会处理.如果有不得当的地方恳请指教,谢谢啦 ^_^ ^_^ 功能实现步奏: 一.获取文件,读取文件并生成url 二.

  • 分享js粘帖屏幕截图到web页面插件screenshot-paste

    分享js粘帖屏幕截图到web页面插件screenshot-paste

    在很多场合下,我们可能有这样的需求:提供个屏幕截图上传到系统,作为一个凭证.传统的操作方式是:屏幕截图,保存文件到本地,在web页面上选择本地文件并上传,这里至少需要三步.有没有可能直接将截图粘帖到web页面上,然后上传?答案是:可以的.这就是本文要介绍的内容了. 由于我的项目有上传屏幕截图这样的需求,为了用户体验更佳,减少操作步骤,我在网上搜了一遍之后,找到了一些眉目.为了便于复用和共享,我又对该功能做了一些封装,于是便有了这个插件 screenshot-paste.运行效果如下图: 插件调用

  • 利用NodeJS和PhantomJS抓取网站页面信息以及网站截图

    利用NodeJS和PhantomJS抓取网站页面信息以及网站截图

    利用PhantomJS做网页截图经济适用,但其API较少,做其他功能就比较吃力了.例如,其自带的Web Server Mongoose最高只能同时支持10个请求,指望他能独立成为一个服务是不怎么实际的.所以这里需要另一个语言来支撑服务,这里选用NodeJS来完成. 安装PhantomJS 首先,去PhantomJS官网下载对应平台的版本,或者下载源代码自行编译.然后将PhantomJS配置进环境变量,输入 $ phantomjs 如果有反应,那么就可以进行下一步了. 利用PhantomJS进行简

  • js+HTML5实现视频截图的方法

    本文实例讲述了js+HTML5实现视频截图的方法.分享给大家供大家参考.具体如下: 1. HTML部分: <video id="video" controls="controls"> <source src=".mp4" /> </video> <button id="capture">Capture</button> <div id="output&

  • JavaScript实现网页截图功能

    JavaScript实现网页截图功能

    使用JavaScript截图,这里我要推荐两款开源组件:一个是Canvas2Image,它可以将Canvas绘图编程PNG/JPEG/BMP的图像:但是光有它还不够,我们需要给任意DOM(至少是绝大部分)截图,这就需要html2canvas,它可以将DOM对象转换成一个canvas对象.两者的功能结合起来,就可以把页面上的DOM截图成PNG或者JPEG图像了,很酷. Canvas2Image 它的原理是利用了HTML5的canvas对象提供了toDataURL()的API: 复制代码 代码如下:

  • THINKPHP+JS实现缩放图片式截图的实现

    THINKPHP+JS实现缩放图片式截图的实现

    作者:杨鑫奇 原始链接:http://www.cnblogs.com/scotoma/archive/2010/03/05/1679477.html 今晚TP论坛的一位大哥加我了,说也遇到这个方面的问题,呵呵!想想其实很多东西都遇到了,是不是应该分享出来呢?其实自己的很多东西都是别人那来的,取之于网络用之于网络!只有大家多分享,才能够提高! 实现方式 上传图片 -- 保存并显示图片 -- JS获取缩略图参数 -- 提交位置参数 -- 图片缩放保存类处理图片 -- 保存截取的图片--更新数据库 -

  • JS图片自动轮换效果实现思路附截图

    JS图片自动轮换效果实现思路附截图

    今天不在状态,安静五一快到了,俺就特想玩了.好了,天色已晚,闲话不多说,看下用javaScript 实现的图片自动轮换效果,先看图片  下面是具体的代码,还是比较简单的. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html x

  • javascript在网页中实现读取剪贴板粘贴截图功能

    见某网站的输入框支持截屏粘贴的功能,觉得有点意思,于是将代码扒出来分享下. 可惜,目前仅有高版本的 Chrome 浏览器支持这样直接粘贴,其他浏览器目前为止还无法粘贴( IE11没测试过 ),当然这种增强型的用户体验功能有总比没有好. 输入框的结构代码: 复制代码 代码如下: <input type="text" id="testInput" /> 为输入框绑定粘贴事件: 复制代码 代码如下: var input = document.getElemen

  • JavaScript获取网页中第一个图片id的方法

    本文实例讲述了JavaScript获取网页中第一个图片id的方法.分享给大家供大家参考.具体如下: 下面的代码通过document.images获取网页中的所有图片,然后获取第一个图片的id属性 <!DOCTYPE html> <html> <body> <img id="klematis lilac" border="0" src="klematis.jpg" width="148"

  • JavaScript返回网页中超链接数量的方法

    本文实例讲述了JavaScript返回网页中超链接数量的方法.分享给大家供大家参考.具体如下: 下面的JS代码通过document.links获取网页中的所有超级链接,从而获得超链接的数量 <!DOCTYPE html> <html> <body> <img src ="planets.gif" width="145" height="126" alt="Planets" usemap

  • JavaScript在网页中画圆的函数arc使用方法

    JavaScript在网页中画圆的函数arc使用方法

    一.arc所需要的参数设置 复制代码 代码如下: arc(x, y, radius, startAngle, endAngle, counterclockwise); 其中x,y,radius都很容易理解,那么重点说说startAngle,endAngle和counterclockwise三个参数! 二.arc参数详解 1,startAngle和endAngle分别指圆开始的角度和结束的角度,手册上面说的是开始的角度为0,结束的角度为Math.PI*2,这样正好画一个圆 2,下面通过实例来讲解s

  • javascript实现网页中涉及的简易运动（改变宽高、透明度、位置）

    平时工作中写网页涉及的运动往往都非常简单,比如改变宽高,透明度,位置,是最常用的几种形式,为了省事,整合了下,于是就有了下面这个东东: 兼容:IE系列.chrome.firefox.opera.Safari.360 /* javascript简易运动 Move.action(dom对象,json格式属性值对,缓动参考值,回调方法) 示例: var box = document.getElementById('Ele'); Move.action(box,{width:500,height:200

  • JavaScript返回网页中锚点数目的方法

    本文实例讲述了JavaScript返回网页中锚点数目的方法.分享给大家供大家参考.具体如下: JavaScript返回网页中锚点的数目,下面的JS代码获取页面中的anchor数量 <!DOCTYPE html> <html> <body> <a name="html">HTML Tutorial</a><br> <a name="css">CSS Tutorial</a>

  • JavaScript获取网页中第一个链接ID的方法

    本文实例讲述了JavaScript获取网页中第一个链接ID的方法.分享给大家供大家参考.具体如下: 下面的JS代码通过document.links获得网页中的所有超级链接数组,然后获得第一个链接的ID属性 <!DOCTYPE html> <html> <body> <h1>sharejs.com</h1> <img src ="planets.gif" width="145" height="

  • 用JavaScript获取网页中的js、css、Flash等文件

    作者:马健邮箱:stronghorse@tom.com主页:http://stronghorse.yeah.net版本:1.01初始发布日期:2005.08.29最后更新日期:2005.09.28 目录一.前言二.从E书或网页中获取文件的一般步骤三.从E书或网页中获取链接进来的css文件四.从E书或网页中获取链接进来的js文件五.从E书或网页中获取Flash文件六.从E书或网页中获取背景音乐文件七.从E书中获取图像文件八.进入frame页面九.其它问题 一.前言 最近我又听到有人抱怨用miniK

  • javascript 在网页中的运用(asp.net)

    复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

  • javascript获取网页中指定节点的父节点、子节点的方法小结

    我们在实际的开发当中经常要获取页面中某个html元素,动态的更新该元素的样式.内容属性等. 那么如何获取要更新的这些元素呢?用JavaScript获取这些节点的方法有很多种,下面是总结的一些方法. 1. 通过document节点获取: (1) document.getElementById(elementId):该方法通过节点的ID,可以准确获得需要的元素,是比较简单快捷的方法.如果页面上含有多个相同id的节点,那么只返回第一个节点. 如 今,已经出现了如prototype.Mootools等多

随机推荐