javascript实现粘贴qq截图功能(clipboardData)

这篇文章主要介绍了在网页中实现读取剪贴板粘贴截图功能,即可以把剪贴板的截图Ctrl+V粘贴到网页的一个输入框中,例如QQ截图、旺旺截图或者其它截图软件。具体代码如下。

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

以上就是本文的全部内容,希望对大家学习JavaScript程序设计有所帮助。

时间: 2016-05-26

JS input文本框禁用右键和复制粘贴功能的代码

复制代码 代码如下: function click(e) { if (document.all) { if (event.button==1||event.button==2||event.button==3) { oncontextmenu='return false'; } } if (document.layers) { if (e.which == 3) { oncontextmenu='return false'; } } } if (document.layers) { docume

js剪切板应用clipboardData实例解析

目前仅有高版本的 Chrome 浏览器支持这样直接粘贴,其他浏览器目前为止还无法粘贴,不过火狐和ie11浏览器在可编辑的div中能够粘贴截图的图片也是base64位和Chrome利用clipboardData的效果是一样的,只是在火狐和ie11浏览器中目前还无法实现类似用clipboardData直接获取图片的base64数据,它是自带的直接进去img数据. 完整实例: <!DOCTYPE HTML> <html lang="en-US"> <head&g

网站内容禁止复制和粘贴、另存为的js代码

1.使右键和复制失效 方法1: 在网页中加入以下代码: 复制代码 代码如下: <script language="Javascript"> document.oncontextmenu=new Function("event.returnValue=false"); document.onselectstart=new Function("event.returnValue=false"); </script> 方法2:

js 剪切板应用clipboardData详细解析

注意:ie7,与ie8 对网页有个复制的权限,需在"安全"中的"自定义级别"的脚本中设置 clipboardData 对象 提供了对剪贴板的访问. 三个方法 1.clearData(sDataFormat) 删除剪贴板中指定格式的数据. 2.getData(sDataFormat) 从剪贴板获取指定格式的数据. 3.setData(sDataFormat, sData) 给剪贴板赋予指定格式的数据.返回 true 表示操作成功. 例子 <script lang

javascript复制粘贴与clipboardData的使用

window.clipboardData可以实现复制与粘贴的操作,它的getData 方法可以实现数据的读取,setData方法可以实现数据的设置 <script language="javascript"> function readTxt() { alert(window.clipboardData.getData("text")); } function setTxt() { var t=document.getElementById("

js 实现复制到粘贴板的功能代码

他主要有两个参数:第一个是设置要复制的是一段文本,第二个参数是要复制具体的内容,这个内容可以从文本框中或使用innerHTML获取. 简单的实例代码: 复制代码 代码如下: <script type="text/javascript"> function copyData() { var copyText = document.getElementById("ctl00_cpRight_txtUrl").value; window.clipboardDa

javascript中clipboardData对象用法详解

本文实例讲述了javascript中clipboardData对象用法.分享给大家供大家参考.具体分析如下: clipboardData对象  ,注意网页里剪贴板到现在只能设置Text类型,即只能复制文本 clearData("Text")清空粘贴板 getData("Text")读取粘贴板的值 setData("Text",val)设置粘贴板的值 当复制的时候body的oncopy事件被触发,直接return false就是禁止复制,注意是不能

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

本文实例为大家分享了clipboardData截屏粘贴实现代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>copyimg</title> <style type="text/css"> #box{ width:200px; height:20

js 剪切板的用法(clipboardData.setData)与js match函数介绍

经常看到这样一种效果:就是单击一个按钮,就将某个区域内的内容,复制到了剪切板中.其实这个功能实现起来也不难,核心就是用到了window子对象clipboardData的一个方法:setData()语法:    clipboardData.setData(sDataFormat, sData) 参数:sDataFormat:要复制的内容的格式:sData:要复制的内容. 返回值:复制成功返回true:失败返回false. 复制代码 代码如下: <script language="JavaSc

JS 巧妙获取剪贴板数据 Excel数据的粘贴

另外的方法就是用flash了,它可以避开浏览器的安全限制,但是system类中只有set的方法,另外的clipboard类中倒是能访问到,但是似乎需要flash10的版本支持. 网上找了一圈,没啥发现.终于想到去看看google sheet是怎么干的. 发现google sheet实现了excel的纯文本的多数据格粘贴,没有安全限制的需要,没有使用flash.可能很多人都知道这种方法了,反正我一开始很惊讶的,但是无奈,google的js文件是处理过的,看起来太累了.然后又去找ZOHO sheet

JS实现获取剪贴板内容的方法

本文实例讲述了JS实现获取剪贴板内容的方法.分享给大家供大家参考,具体如下: 这里介绍了JS获取剪贴板内容的代码: <Script Language="JavaScript"> var content = clipboardData.getData("Text"); if (content!=null) { document.write("<center><font size=5 color=red>WARNING, T

js下获取div中的数据的原理分析

关于从中学到的知识: document.getelementbyid("ddhdh").innerHTML 可以获取到div中的全部数据,包括标签...但是只是在IE和OPERA中使用 document.getelementbyid("ddhdh").innerTEXT 可以获取到div中的文本数据,不会获取到标签...但是只是在IE和OPERA中使用 document.getElementById("text").textContent 用于在

利用JS如何获取form表单数据

前言 本文主要给大家介绍的是关于利用JS获取form表单数据的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧 方法如下: 1.有的时候想偷点懒,页面上有大量的表单提交数据,每次单独获取都比较麻烦.代码冗余度也比较多,因此封装了一个方法. 2. 表单元素必须要有name属性,name属性是向后端提交的字段数据. 3.html代码 <h3>下拉框</h3> <select name="sel" id="sel" c

node.js+Ajax实现获取HTTP服务器返回数据

我们看一个HTML5页面中通过AJAX请求的方式获取HTTP服务器返回数据的代码示例.由于我们把服务器的端口指定为1337,并将从端口为80的网站中运行HTML5页面,因此这是一种跨域操作,需要在HTTP响应头部中添加Access_Control_Allow_Origin字段,并且将参数指定为允许向服务器请求数据额域名+端口号(省略端口号时允许该域名下的任何端口向服务器请求数据), 静态页面:index.html(注:一定要放在服务器环境下,如果是win7系统的话,可以开启IIS服务,并把页面考

js遍历获取表格内数据的方法(必看)

本文将介绍如何使用js获取表格内某一单元格的内容,表格由table,tr,td等html标记组成.table表示表格,tr表示行,td表示行中列. 1.一般的表格结构如下 <table> <tr> <td>id</td> <td>name</td> </tr> <tr> <td>1</td> <td>fdipzone</td> </tr> <tr

js树插件zTree获取所有选中节点数据的方法

本文实例讲述了js树插件zTree获取所有选中节点数据的方法.分享给大家供大家参考.具体分析如下: 由于刚接触Tree方面的东西.在网上看到了zTree,是中国人写的.所以API肯定是中文的.而且评论也很好.所以尝试用zTree在项目中.这个获取所有选中节点数据很简单.看一下API就能看懂了.所以我就直接上代码了. 复制代码 代码如下: <!DOCTYPE html> <HTML> <HEAD>     <TITLE> ZTREE DEMO - Standa

Java用POI解析excel并获取所有单元格数据的实例

1.导入POI相关jar包 org.apache.poi jar 2.代码示例 public List getAllExcel(File file, String tableName, String fname, String enterpriseId, String reportId, String projectId) throws FileNotFoundException, IOException, ClassNotFoundException, InstantiationExcepti

js与jQuery实现获取table中的数据并拼成json字符串操作示例

本文实例讲述了js与jQuery实现获取table中的数据并拼成json字符串操作.分享给大家供大家参考,具体如下: 核心代码如下: JavaScript代码: function tabToJSON(id) { var trs = document.getElementById(id).getElementsByTagName("tr");//获得tr数组 var titles = trs[0].getElementsByTagName("td"); //获得表头t

利用js将ajax获取到的后台数据动态加载至网页中的方法

动态生成二级菜单树: <script> jQuery(function($) { /********** 获取未处理报警信息总数 **************/ var result; $.ajax({ async:false, cache:false, url: "alarm_findPageAlarm.do",//访问后台接口取数据 // dataType : "json", type: 'POST', success: function(data)