js剪切板应用clipboardData实例解析


Posted in Javascript onMay 29, 2016

目前仅有高版本的 Chrome 浏览器支持这样直接粘贴,其他浏览器目前为止还无法粘贴,不过火狐和ie11浏览器在可编辑的div中能够粘贴截图的图片也是base64位和Chrome利用clipboardData的效果是一样的,只是在火狐和ie11浏览器中目前还无法实现类似用clipboardData直接获取图片的base64数据,它是自带的直接进去img数据。

完整实例:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>利用clipboardData在网页中实现截屏粘贴的功能</title>
<style type="text/css">
  .box{ width:500px; height:300px; border:1px solid #ddd; }
  .box img{max-width:480px; max-height: 100%; text-align: center;}
</style>
</head>
<body>
<div class="box" contenteditable="true" id="testInput">
</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;
      console.log(img);
      document.getElementById('testInput').appendChild( img );
    };
    reader.readAsDataURL( blob );
  };

  document.getElementById( 'testInput' ).addEventListener( 'paste', function( e ){
    //window.clipboardData.getData("Text") ie下获取黏贴的内容 e.clipboardData.getData("text/plain")火狐谷歌下获取黏贴的内容
    //alert(e.clipboardData.getData("text/plain") )
    var clipboardData = e.clipboardData,//谷歌
      i = 0,
      items, item, types;
       console.log('0')

    if( clipboardData ){
       console.log('1')
      items = clipboardData.items;
      if( !items ){
        console.log(2)
        return;
      }
      console.log(3)
      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 );
      }
     }
   },false);
})(); 
</script>


</script>

</body>
</html>

实例二:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 <div id="div" style="width:100%;height:700px;border:1px solid #ccc;padding:20px" contenteditable="true"></div>
 <script>
  var div = document.getElementById('div');
  div.addEventListener('paste', function(e) {
   if(e.clipboardData) {
    for(var i = 0; i < e.clipboardData.items.length; i++) {
     var c = e.clipboardData.items[i];
     var f = c.getAsFile();
     var reader = new FileReader();
     reader.onload = function(e) {
      div.innerHTML += '<img src="' + e.target.result + '">';
     }
     reader.readAsDataURL(f);
    }
   }
  });
 </script>
</body>
</html>

实现的方法:

方法一:在Chrome浏览器中能够直接通过clipboardData获取截图的图片数据,可以用ajax将数据传给后台,然后由后台开发返回带域名的图片地址

方法二:由于在火狐等浏览器中无法直接获取图片数据,所以可以在粘贴的时候获取div中的img的数据是base64的url数据,然后同方法一用ajax

方法三:可以统一在点击发布或者保存消息时,获取div中的img的数据是base64的url数据,然后同方法一用ajax,如果有多张就循环,也或者是直接点击保存和发布的时候,后端开发做处理,返回来的显示信息中直接做处理,这样我们在div中就不需要把base64的url替换成后端返回的带域名的地址

方法四:在div中粘贴的时候弹出一个弹出层,然后弹出层中有截图的图片预览可确认上传按钮,点击上传按钮走ajax上传图片同方法一

Javascript 相关文章推荐
javascript实现的淘宝旅行通用日历组件用法实例
Aug 03 Javascript
js实现根据身份证号自动生成出生日期
Dec 15 Javascript
jquery对象访问是什么及使用方法介绍
May 03 Javascript
Javascript 创建类并动态添加属性及方法的简单实现
Oct 20 Javascript
AngularJS递归指令实现Tree View效果示例
Nov 07 Javascript
BootStrap fileinput.js文件上传组件实例代码
Feb 20 Javascript
JavaScript实现兼容IE6的收起折叠与展开效果实例
Sep 20 Javascript
React根据宽度自适应高度的示例代码
Oct 11 Javascript
说说node中的可读流和可写流的区别
Jun 01 Javascript
vue中用 async/await 来处理异步操作
Jul 18 Javascript
OpenLayers3实现地图显示功能
Sep 25 Javascript
vue中解决微信html5原生ios虚拟键返回不刷新问题
Oct 20 Javascript
js实现可控制左右方向的无缝滚动效果
May 29 #Javascript
原生JavaScript编写canvas版的连连看游戏
May 29 #Javascript
js省市县三级联动效果实例
Apr 15 #Javascript
js实现精确到秒的倒计时效果
May 29 #Javascript
解读Bootstrap v4 sass设计
May 29 #Javascript
bootstrap和jQuery.Gantt的css冲突 如何解决
May 29 #Javascript
深入理解js数组的sort排序
May 28 #Javascript
You might like
PHP读MYSQL中文乱码的解决方法
2006/12/17 PHP
PHP程序开发范例学习之表单 获取文本框的值
2011/08/08 PHP
php 保留字列表
2012/10/04 PHP
PHP微信开发之查询城市天气
2016/06/23 PHP
jQuery+php简单实现全选删除的方法
2016/11/28 PHP
PHP命名空间(namespace)原理与用法详解
2019/12/11 PHP
js 时间函数应用加、减、比较、格式转换的示例代码
2013/08/23 Javascript
用js编写的简单的计算器代码程序
2015/08/04 Javascript
工厂模式在JS中的实践
2017/01/18 Javascript
vue数据双向绑定原理解析(get &amp; set)
2017/03/08 Javascript
protractor的安装与基本使用教程
2017/07/07 Javascript
基于JavaScript表单脚本(详解)
2017/10/18 Javascript
jQuery替换节点元素的操作方法
2018/03/18 jQuery
Bootstrap 按钮样式与使用代码详解
2018/12/09 Javascript
vue添加class样式实例讲解
2019/02/12 Javascript
js中延迟加载和预加载的具体使用
2021/01/14 Javascript
Python中super的用法实例
2015/05/28 Python
Python实现二叉树结构与进行二叉树遍历的方法详解
2016/05/24 Python
Python的Asyncore异步Socket模块及实现端口转发的例子
2016/06/14 Python
widows下安装pycurl并利用pycurl请求https地址的方法
2018/10/15 Python
十个Python练手的实战项目,学会这些Python就基本没问题了(推荐)
2019/04/26 Python
详解Python 切片语法
2019/06/10 Python
Python何时应该使用Lambda函数
2019/07/02 Python
Python环境下安装PyGame和PyOpenGL的方法
2020/03/25 Python
Python requests模块安装及使用教程图解
2020/06/30 Python
python中pickle模块浅析
2020/12/29 Python
美国生日蛋糕店:Bake Me A Wish!
2017/02/08 全球购物
植村秀加拿大官网:Shu Uemura加拿大
2019/09/03 全球购物
GWT (Google Web Toolkit)有哪些主要的原件组成?
2015/06/08 面试题
挂职自我鉴定
2014/02/26 职场文书
环保建议书作文
2014/03/12 职场文书
说明书范文
2014/05/07 职场文书
大学感恩节活动策划方案
2014/10/11 职场文书
2015感人爱情寄语
2015/02/26 职场文书
2015年暑期实践报告范文
2015/07/13 职场文书
严以修身专题学习研讨会发言材料
2015/11/09 职场文书