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 相关文章推荐
FireFox与IE 下js兼容触发click事件的代码
Nov 20 Javascript
javascript setTimeout和setInterval 的区别
Dec 08 Javascript
jQuery中ajax和post处理json的不同示例对比
Nov 02 Javascript
js如何打印object对象
Oct 16 Javascript
js生成随机数的方法实例
Oct 16 Javascript
浅谈javascript基础之客户端事件驱动
Jun 10 Javascript
Vue实现双向绑定的原理以及响应式数据的方法
Jul 02 Javascript
对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍
Aug 30 Javascript
Vuejs 实现简易 todoList 功能 与 组件实例代码
Sep 10 Javascript
Vue实现简易翻页效果源码分享
Nov 08 Javascript
微信小程序rich-text富文本用法实例分析
May 20 Javascript
antd Form组件方法getFieldsValue获取自定义组件的值操作
Oct 29 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
PHP5函数小全(分享)
2013/06/06 PHP
php 地区分类排序算法
2013/07/01 PHP
php读取excel文件示例分享(更新修改excel)
2014/02/27 PHP
PHP采用curl模仿用户登陆新浪微博发微博的方法
2014/11/07 PHP
PHP中if和or运行效率对比
2014/12/12 PHP
php实现字符串反转输出的方法
2015/03/14 PHP
Yii2实现跨mysql数据库关联查询排序功能代码
2017/02/10 PHP
微信开发之获取JSAPI TICKET
2017/07/07 PHP
JavaScript Undefined,Null类型和NaN值区别
2008/10/22 Javascript
js TextArea的选中区域处理
2010/12/28 Javascript
基于JQuery的类似新浪微博展示信息效果的代码
2012/07/23 Javascript
easyui datagrid 键盘上下控制选中行示例
2014/03/31 Javascript
Bootstrap3使用typeahead插件实现自动补全功能
2016/07/07 Javascript
扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框
2017/02/21 Javascript
详解在 Angular 项目中添加 clean-blog 模板
2017/07/04 Javascript
解读ES6中class关键字
2017/11/20 Javascript
react+redux的升级版todoList的实现
2017/12/18 Javascript
layui问题之模拟select点击事件的实例讲解
2018/08/15 Javascript
vue+echarts实现中国地图流动效果(步骤详解)
2021/01/27 Vue.js
如何在JavaScript中使用localStorage详情
2021/02/04 Javascript
在python的WEB框架Flask中使用多个配置文件的解决方法
2014/04/18 Python
django启动uwsgi报错的解决方法
2018/04/08 Python
python 通过SSHTunnelForwarder隧道连接redis的方法
2019/02/19 Python
python 视频逐帧保存为图片的完整实例
2019/12/10 Python
Python实现图片指定位置加图片水印(附Pyinstaller打包exe)
2021/03/04 Python
草莓巧克力:Shari’s Berries
2017/02/07 全球购物
英语师范专业毕业生自荐信
2013/09/21 职场文书
2014离婚协议书范文
2014/09/10 职场文书
终止劳动合同协议书
2014/10/05 职场文书
2014年控辍保学工作总结
2014/12/08 职场文书
2015年实习单位评语
2015/03/25 职场文书
起诉书范文
2015/05/20 职场文书
党支部半年考察意见
2015/06/01 职场文书
深入浅析React中diff算法
2021/05/19 Javascript
5种 JavaScript 方式实现数组扁平化
2021/10/05 Javascript
zabbix如何添加监控主机和自定义监控项
2022/08/14 Servers