js剪切板应用clipboardData实例解析

目前仅有高版本的 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上传图片同方法一