js實現獲得QQ截圖或者微信截圖後剪下板的內容clipboardData
阿新 • • 發佈：2020-12-23
最近專案需求是獲得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>