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 相关文章推荐
一段好玩的JavaScript代码
Dec 01 Javascript
JQuery实现的在新窗口打开链接的方法小结
Apr 22 Javascript
JavaScript自动设置IFrame高度的小例子
Jun 08 Javascript
JS中图片缓冲loading技术的实例代码
Aug 29 Javascript
cookie中的path与domain属性详解
Dec 18 Javascript
JQuery.get提交页面不跳转的解决方法
Jan 13 Javascript
jQuery数据检索中根据关键字快速定位GridView指定行的实现方法
Jun 08 Javascript
使用Math.max,Math.min获取数组中的最值实例
Apr 25 Javascript
使用vue-infinite-scroll实现无限滚动效果
Jun 22 Javascript
javascript 高级语法之继承的基本使用方法示例
Nov 11 Javascript
基于vue+echarts 数据可视化大屏展示的方法示例
Mar 09 Javascript
vue 动态给每个页面添加title、关键词和描述的方法
Aug 28 Javascript
利用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
关于UEditor编辑器远程图片上传失败的解决办法
2012/08/31 PHP
set_include_path和get_include_path使用及注意事项
2013/02/02 PHP
php采集文章中的图片获取替换到本地(实现代码)
2013/07/08 PHP
php使用curl发送json格式数据实例
2013/12/17 PHP
smarty简单应用实例
2015/11/03 PHP
详解PHP原生DOM对象操作XML的方法
2016/10/17 PHP
浅谈PHP接入(第三方登录)QQ登录 OAuth2.0 过程中遇到的坑
2017/10/13 PHP
Gambit vs ForZe BO3 第一场 2.13
2021/03/10 DOTA
prettify 代码高亮着色器google出品
2010/12/28 Javascript
js对图片base64编码字符串进行解码并输出图像示例
2014/03/17 Javascript
Javascript基础教程之if条件语句
2015/01/18 Javascript
最新最热最实用的15个jQuery插件汇总
2015/07/05 Javascript
Vue.js中数组变动的检测详解
2016/10/12 Javascript
Bootstrap滚动监听组件scrollspy.js使用方法详解
2017/07/20 Javascript
VUE长按事件需求详解
2017/10/18 Javascript
jQuery ajax读取本地json文件的实例
2017/10/31 jQuery
vue+swiper实现侧滑菜单效果
2017/12/28 Javascript
vue js秒转天数小时分钟秒的实例代码
2018/08/08 Javascript
详解基于mpvue微信小程序下载远程图片到本地解决思路
2019/05/16 Javascript
基于element-ui封装可搜索的懒加载tree组件的实现
2020/05/22 Javascript
深入理解 ES6中的 Reflect用法
2020/07/18 Javascript
AJAX XMLHttpRequest对象创建使用详解
2020/08/20 Javascript
使用Python中的cookielib模拟登录网站
2015/04/09 Python
利用python list完成最简单的DB连接池方法
2019/08/09 Python
详解Django admin高级用法
2019/11/06 Python
Python3直接爬取图片URL并保存示例
2019/12/18 Python
python 轮询执行某函数的2种方式
2020/05/03 Python
从零实现一个自定义html5播放器的示例代码
2017/08/01 HTML / CSS
个性化皮包、小袋、生活配件:Mon Purse
2019/03/26 全球购物
Electric官网:美国高级眼镜和配件品牌
2020/06/04 全球购物
机械设计专业应届生求职信
2013/11/21 职场文书
计算机大学生职业生涯规划书范文
2014/02/19 职场文书
党员教师四风问题对照检查材料
2014/09/26 职场文书
个人求职信格式范文
2015/03/20 职场文书
4S店收银员岗位职责
2015/04/07 职场文书
导游词之山西关帝庙
2019/11/01 职场文书