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

利用 clipboardData 在网页中实现截屏粘贴的功能的更多相关文章

  1. js利用clipboardData在网页中实现截屏粘贴的功能

    目前仅有高版本的 Chrome 浏览器支持这样直接粘贴,其他浏览器目前为止还无法粘贴,不过火狐和ie11浏览器在可编辑的div中能够粘贴截图的图片也是base64位和Chrome利用clipboard ...

  2. C#使用phantomjs 进行网页整页截屏

    C#使用phantomjs 进行网页整页截屏 hantomjs 是一个基于js的webkit内核无头浏览器 也就是没有显示界面的浏览器,这样访问网页就省去了浏览器的界面绘制所消耗的系统资源,比较适合用 ...

  3. iOS中的截屏（屏幕截屏及scrollView或tableView的全部截屏）

    iOS中的截屏(屏幕截屏及scrollView或tableView的全部截屏) 2017.03.16 12:18* 字数 52 阅读 563评论 4喜欢 2 1. 截取屏幕尺寸大小的图片并保存至相册 ...

  4. JS实现网页选取截屏 保存+打印 功能(转)

    源码地址: 1.1 确定截图选取范围 用户在开始截图后,需要在页面上选取一个截图范围,并且可以直观的看到,类似如下效果: image 我们的选取范围就是鼠标开始按下的那个点到鼠标拖动然后松开的那个点之 ...

  5. 用phantomjs 进行网页整页截屏

    写截取整个网页程序是一个做前台的哥们所托,要做一些漂亮的界面原形,参考一些不错的网站设计就帮他弄了个截屏的程序. phantomjs   是一个基于js的webkit内核无头浏览器 也就是没有显示界面 ...

  6. iOS 中捕获截屏操作

    转自:iOS知识小集 在iOS 7后,苹果提供了UIApplicationUserDidTakeScreenshotNotification通知来告诉App用户做了截屏操作.苹果的描述如下: // T ...

  7. js 利用canvas + flv.js实现视频流 截屏 、本地下载功能实现，兼容火狐，谷歌；canvas截屏跨域问题，无音频视频流加载不显示问题

    项目:物联网监控项目----后台视频流管理(前端实现视频截屏功能) 本文就不同视频源分情况展示: 1 本地视频(项目同目录视频)截屏(canvas.getContext("2d).drawI ...

  8. 关于Unity中GrabPass截屏的使用和Shader的组织优化

    GrabPass截屏 可以用来截屏,截屏后把纹理传给下一个通道使用. 1:使用抓屏通道, GrabPass {} 或 GrabPass { “ 纹理名称”}; 使用GrabPass {}后,可以用_G ...

  9. python3 利用正则获取网页中的想保存下来的内容

    需要获取某个网页中表格部分中某个产品的成份 分析在html中成份的元素代码 <a href="/composition/4c3060178d1184935a48c4e51be4f63f ...

随机推荐

  1. IIS web服务器与ASP.NET

    参考教程:MVC网站项目发布到IIS服务器 https://jingyan.baidu.com/article/92255446574e11851648f4e4.html https://blog.c ...

  2. 第一课 初识Linux(一)

    Linux起源 创始人:李纳斯.托瓦兹 Linux简介: Linux是一套免费使用和自由传播的类UNIX操作系统:是一个基于POSIX和UNIX的多用户.多任务.支持多线程和多CPU的操作系统.Lin ...

  3. django 商城项目之购物车以及python中的一些redis命令

    最近在用django restframe框架做一个商城项目,有一个关于购物车的业务逻辑,是用cookie和redis存储的购物车信息,在这里记录一下. 完成一个商城项目,如果不做一个购物车,就是十分可 ...

  4. mysql文本后面带换行符导致查询不到

    UPDATE tablename SET  FIELD = REPLACE(REPLACE(FIELD, CHAR(10), ''), CHAR(13), ''); CHAR(10):  换行符 CH ...

  5. 使用T4模板为EF框架添加数据库实体注释（转）

    1. 下载文件GetSummery.ttinclude2. 把我们下载下来的文件解压,将解压出来的文件放入解决方案中3. 修改下app.config,添加一个连接字符串: <add name=& ...

  6. uni-app导航栏配置

    uni-app写app的内容会与沉浸栏重合在一起,写好好多,都是有点问题的,这次终于找到解决的方法了,与大家分享一下 最简单的解决方式就是配置mainfest.json来关闭沉浸式.即通过打开应用的m ...

  7. issue - 登录前的信息和标识文件

    DESCRIPTION (描述) /etc/issue 是一个文本文件,它包含了在登录提示符出现之前显示的信息或者系统标识.如果 getty(1) 支持的话,它可能包括多个 @char 和 \char ...

  8. java.lang.Integer 类（JDK1.7）

    1.Integer 和int 的区别 ①.Integer 是 int 包装类,int 是八大基本数据类型之一(byte,char,short,int,long,float,double,boolean ...

  9. C#操作目录和文件

    C#操作目录和文件  创建目录和文件 1.通过Path类的Combine方法可以合并路径. string activeDir = @"C:\myDir"; string newPa ...

  10. java面试(反射）05

    1.什么是反射 JAVA反射机制是在运行状态中,对于任意一个类,都能够获取这个类的所有属性和方法:对于任意一个对象,都能够调用它的任意一个方法和属性:这种动态获取类信息以及动态调用对象内容就称为jav ...