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 相关文章推荐
node.js中的fs.chmodSync方法使用说明
Dec 18 Javascript
jQuery中:disabled选择器用法实例
Jan 04 Javascript
JavaScript使用DeviceOne开发实战(四)仿优酷视频应用
Dec 02 Javascript
JavaScript面向对象之私有静态变量实例分析
Jan 14 Javascript
JS 实现 ajax 异步浏览器兼容问题
Jan 21 Javascript
JS+HTML5 FileReader对象用法示例
Apr 07 Javascript
jQuery使用正则验证15/18身份证的方法示例
Apr 27 jQuery
vue增加强缓存和版本号的实现方法
May 01 Javascript
vue视图不更新情况详解
May 16 Javascript
layer设置maxWidth及maxHeight解决方案
Jul 26 Javascript
详解JavaScript中的数据类型,以及检测数据类型的方法
Sep 17 Javascript
js实现限定范围拖拽的示例
Oct 26 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小马小结(方便查找后门的朋友)
2012/05/05 PHP
PHP中数组的三种排序方法分享
2012/05/07 PHP
PHP变量内存分配问题记录整理
2013/11/27 PHP
ThinkPHP的Widget扩展实例
2014/06/19 PHP
PHP生成数组再传给js的方法
2014/08/07 PHP
PHP实现的redis主从数据库状态检测功能示例
2017/07/20 PHP
ThinkPHP5.1的权限控制怎么写?分享一个AUTH权限控制
2021/03/09 PHP
js Dialog 实践分享
2012/10/22 Javascript
使用Java实现简单的server/client回显功能的方法介绍
2013/05/03 Javascript
jQuery实现动画效果的实例代码
2013/05/07 Javascript
深入理解JavaScript系列(36):设计模式之中介者模式详解
2015/03/04 Javascript
如何使用HTML5地理位置定位功能
2015/04/27 Javascript
拥有一个属于自己的javascript表单验证插件
2016/03/24 Javascript
JavaScript实现打地鼠小游戏
2020/04/23 Javascript
jqueryUI tab标签页代码分享
2017/10/09 jQuery
Bootstrap Table 双击、单击行获取该行及全表内容
2018/08/31 Javascript
jQuery实现表格隔行换色
2018/09/01 jQuery
node中的密码安全(加密)
2018/09/17 Javascript
JavaScript中Dom操作实例详解
2019/07/08 Javascript
JavaScript如何把两个数组对象合并过程解析
2019/10/10 Javascript
JavaScript实现滚动加载更多
2020/12/27 Javascript
利用python编写一个图片主色转换的脚本
2017/12/07 Python
Python2.7实现多进程下开发多线程示例
2019/05/31 Python
pip install python 快速安装模块的教程图解
2019/10/08 Python
Python手动或自动协程操作方法解析
2020/06/22 Python
HTML5 Canvas入门学习教程
2016/03/17 HTML / CSS
世界顶级俱乐部的官方球衣和套装:Subside Sports
2018/04/22 全球购物
罗马尼亚购物网站:Vivantis.ro
2019/07/20 全球购物
欧姆龙医疗保健与医疗产品:Omron Healthcare
2020/02/10 全球购物
美国一站式电动和手动工具商店:International Tool
2020/11/26 全球购物
益模软件Java笔试题
2012/03/27 面试题
医院护理人员的自我评价分享
2013/10/04 职场文书
师范教师大学生职业生涯规划范文
2014/01/05 职场文书
2016年公司中秋节致辞
2015/11/26 职场文书
创业计划书之网络外卖
2019/10/31 职场文书
深入理解redis中multi与pipeline
2021/06/02 Redis