js利用clipboardData实现截屏粘贴功能


Posted in Javascript onOctober 12, 2016

本文实例为大家分享了clipboardData截屏粘贴实现代码,供大家参考,具体内容如下

<!DOCTYPE html> 
<html> 
<head lang="en"> 
  <meta charset="UTF-8"> 
  <title>copyimg</title> 
 
  <style type="text/css"> 
    #box{ width:200px; height:200px; border:1px solid #ddd; } 
  </style> 
 
</head> 
 
<script language="JavaScript"> 
 
 
</script> 
 
<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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS trim去空格的最佳实践
Oct 30 Javascript
禁止选中文字兼容IE、Chrome、FF等
Sep 04 Javascript
JS常用函数使用指南
Nov 23 Javascript
jQuery数据缓存用法分析
Feb 20 Javascript
JS日期格式化之javascript Date format
Oct 01 Javascript
Jquery+ajax+JAVA(servlet)实现下拉菜单异步取值
Mar 23 Javascript
总结javascript中的六种迭代器
Aug 16 Javascript
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 jQuery
jQuery 实现左右两侧菜单添加、移除功能
Jan 02 jQuery
jQuery实现文件编码成base64并通过AJAX上传的方法
Apr 12 jQuery
基于vue.js实现分页查询功能
Dec 29 Javascript
Vue项目利用axios请求接口下载excel
Nov 17 Vue.js
利用jquery给指定的table动态添加一行、删除一行的方法
Oct 12 #Javascript
jQuery给指定的table动态添加删除行的操作方法
Oct 12 #Javascript
详解Javascript中的原型OOP
Oct 12 #Javascript
浅析BootStrap Treeview的简单使用
Oct 12 #Javascript
jquery自定义表单验证插件
Oct 12 #Javascript
jquery 动态增加删除行的简单实例(推荐)
Oct 12 #Javascript
老生常谈javascript的类型转换
Oct 12 #Javascript
You might like
IIS6.0+PHP5.x+MySQL5.x+Zend3.0x+GD+phpMyAdmin2.8x通用安装实例(已经完成)
2006/12/06 PHP
PHP 线程安全与非线程安全版本的区别深入解析
2013/08/06 PHP
thinkphp Apache配置重启Apache1 restart 出错解决办法
2017/02/15 PHP
PHP大文件分割上传 PHP分片上传
2017/08/28 PHP
PHP封装的page分页类定义与用法完整示例
2018/12/24 PHP
laravel解决迁移文件一次删除创建字段报错的问题
2019/10/24 PHP
Javascript的IE和Firefox兼容性汇编(zz)
2007/02/02 Javascript
javascript 复杂的嵌套环境中输出单引号和双引号
2009/05/26 Javascript
javascript 当前日期加(天、周、月、年)
2009/08/09 Javascript
JavaScript DOM 学习第二章 编辑文本
2010/02/19 Javascript
IE中jquery.form中ajax提交没反应解决方法分享
2012/09/11 Javascript
jQuery 仿百度输入标签插件附效果图
2014/07/04 Javascript
一个小例子解释如何来阻止Jquery事件冒泡
2014/07/17 Javascript
jQuery实现统计输入文字个数的方法
2015/03/11 Javascript
详解AngularJS实现表单验证
2015/12/10 Javascript
JavaScript中instanceof运算符的使用示例
2016/06/08 Javascript
js实现图片旋转 js滚动鼠标中间对图片放大缩小
2017/07/05 Javascript
详解EasyUi控件中的Datagrid
2017/08/23 Javascript
Vue.js自定义事件的表单输入组件方法
2018/03/08 Javascript
使用iView Upload 组件实现手动上传图片的示例代码
2018/10/01 Javascript
微信小程序中悬浮窗功能的实现代码
2019/08/02 Javascript
2分钟实现一个Vue实时直播系统的示例代码
2020/06/05 Javascript
Python爬虫之正则表达式的使用教程详解
2018/10/25 Python
Python之列表实现栈的工作功能
2019/01/28 Python
python内置模块collections知识点总结
2019/12/19 Python
flask框架url与重定向操作实例详解
2020/01/25 Python
python模拟斗地主发牌
2020/04/22 Python
Selenium结合BeautifulSoup4编写简单的python爬虫
2020/11/06 Python
python编写扎金花小程序的实例代码
2021/02/23 Python
美国女性服饰销售网站:Nasty Gal(坏女孩)
2016/07/26 全球购物
酒吧员工的岗位职责
2013/11/26 职场文书
社区工作者先进事迹
2014/01/18 职场文书
音乐之声音乐广播稿
2014/09/10 职场文书
社区公民道德宣传日活动总结
2015/03/23 职场文书
初中生活随笔
2015/08/15 职场文书
python3实现Dijkstra算法最短路径的实现
2021/05/12 Python