js剪切板应用clipboardData实例解析

2024-05-06 14:57:19

字体：大中小

来源：转载

供稿：网友

目前仅有高版本的 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>

上一篇：js和C# 时间日期格式转换的简单实例

下一篇：使用JQuery 加载页面时调用JS的实现方法

学习交流

硬盘分区如何设置准确的分区空间

硬盘分区如何设置准确的分区空间...

热门图片

猜你喜欢的新闻

猜你喜欢的关注