最近项目需求是获得QQ截图或者微信截图，直接粘贴文本框内并发送
开发中使用paste事件，一直显示clipboardData的items内容为空，一直以为获得不到里面的，后来才发现items是一个伪数组，直接使用下面的方法就可以了
输入框中要实现粘贴图片功能，不能用input、textarea等输入框作为父容器，因为input、textarea中只能接受字符串，对于html标签不进行转义以及渲染。
所以用contenteditable='true'属性来使div(其他容器也可)实现可编辑，来模拟输入框，实现粘贴图片至输入框中的效果
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <link rel="stylesheet" href=""> <style type="text/css" media="screen"> div{ width:100%; height:200px; background:#ccc; margin:10px auto; text-align:center; } </style> </head> <body> this is app-static.acc5.com/test/index.html <div contenteditable="true"></div> <div contenteditable="true"></div> <div><img id="myimg" ></div> </body> <script type="text/javascript"> //绑定粘贴事件 Ctrl+V bindPaste(); //绑定粘贴事件 function bindPaste(){ //定义变量存储获取的图片内容 var blob; //获取body对象 var body = document.getElementsByTagName("body")[0]; //定义body标签绑定的粘贴事件处理函数 var fun=function(e){ //获取clipboardData对象 var data=e.clipboardData||window.clipboardData; console.log('fun',data); //获取图片内容 blob=data.items[0].getAsFile(); //判断是不是图片，最好通过文件类型判断 var isImg=(blob&&1)||-1; var reader=new FileReader(); if(isImg>=0){ //将文件读取为 DataURL reader.readAsDataURL(blob); } //文件读取完成时触发 reader.onload=function(event){ //获取base64流 var base64_str=event.target.result; //div中的img标签src属性赋值，可以直接展示图片 console.log('base64_str',base64_str); document.getElementById('myimg').src=base64_str; } } //通过body标签绑定粘贴事件，注意有些标签绑定粘贴事件可能出错 body.removeEventListener('paste',fun); body.addEventListener('paste',fun); } </script> </html>