ปัจจุบันเฉพาะเบราว์เซอร์ Chrome รุ่นที่สูงกว่าเท่านั้นที่รองรับการวางโดยตรง เบราว์เซอร์อื่นไม่สามารถวางได้ อย่างไรก็ตามภาพที่ถ่ายโดยเบราว์เซอร์ Firefox และ IE11 สามารถวางภาพหน้าจอใน Divs ที่แก้ไขได้ก็คือ Base64 บิตและ Chrome ใช้ ClipboardData อย่างไรก็ตามในเบราว์เซอร์ Firefox และ IE11 มันเป็นไปไม่ได้ที่จะได้รับข้อมูล BASE64 โดยตรงของภาพโดยใช้ ClipboardData มันมาพร้อมกับข้อมูล IMG โดยตรงของตัวเอง
ตัวอย่างที่สมบูรณ์:
<! doctype html> <html lang = "en-us"> <head> <meta charset = "utf-8"> <title> ใช้ clipboarddata เพื่อใช้งานสกรีนช็อตและฟังก์ชั่นในเว็บเพจ </title> ความสูง: 300px; ชายแดน: 1px Solid #DDD; } .Box IMG {Max-Width: 480px; สูงสุด: 100%; TEXT-ALGING: CENTRES;} </style> </head> <body> <div contenteditable = "true" id = "testinput"> </div> <script type = "text/javascript"> (function () {var imgreader = function (รายการ) {var blob = item.getasfile () img.src = e.target.result; //window.clipboarddata.getData("Text ") ได้รับเนื้อหาที่วางไว้ภายใต้ E.ClipBoardData.getData (" ข้อความ/ธรรมดา ") Firefox ได้รับเนื้อหาที่วางไว้ภายใต้ Google //alert(e.clipboardData.getData console.log ('0') ถ้า (clipboarddata) {console.log ('1') รายการ = clipboarddata.items; === 'files') {item = items [i]; </script> </script> </body> </html>ตัวอย่างที่ 2:
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> เอกสาร </title> </head> <body> <div id = "div" contenteditable = "true"> </div> div.addeventListener ('paste', ฟังก์ชั่น (e) {ถ้า (e.clipboarddata) {สำหรับ (var i = 0; i <e.clipboardData.items.length; i ++) {var c = e.clipboardData.items [i]; div.innerhtml + = '<img src = "' + e.target.result + '">'} reader.readasdataurl (f); </script> </body> </html>วิธีการดำเนินการ:
วิธีที่ 1: ในเบราว์เซอร์ Chrome คุณสามารถรับข้อมูลภาพภาพหน้าจอโดยตรงผ่าน ClipboardData คุณสามารถใช้ AJAX เพื่อส่งผ่านข้อมูลไปยังพื้นหลังจากนั้นส่งคืนที่อยู่ภาพด้วยชื่อโดเมนโดยการพัฒนาพื้นหลัง
วิธีที่ 2: เนื่องจากข้อมูลภาพไม่สามารถรับได้โดยตรงในเบราว์เซอร์เช่น Firefox คุณสามารถรับข้อมูล IMG ใน DIV เป็นข้อมูล URL Base64 เมื่อวางแล้วใช้ AJAX เป็นวิธีเดียวกัน
วิธีที่ 3: เมื่อคลิกที่การเผยแพร่หรือบันทึกข้อความคุณสามารถรับข้อมูลของ IMG ใน DIV เป็นข้อมูล URL Base64 จากนั้นใช้ AJAX ในเวลาเดียวกัน หากมีรูปภาพหลายภาพลูปหรือเมื่อคลิกที่บันทึกและเผยแพร่กระบวนการพัฒนาแบ็คเอนด์จะดำเนินการและข้อมูลการแสดงผลที่ส่งคืนจะถูกประมวลผลโดยตรง ด้วยวิธีนี้เราไม่จำเป็นต้องแทนที่ URL Base64 ด้วยที่อยู่ด้วยชื่อโดเมนที่ส่งคืนโดย back-end ใน div
วิธีที่ 4: เมื่อวางใน DIV เลเยอร์ป๊อปอัพจะปรากฏขึ้นจากนั้นตัวอย่างของภาพที่มีภาพหน้าจอในชั้นป๊อปอัพสามารถยืนยันปุ่มอัปโหลดได้ คลิกปุ่มอัปโหลดเพื่อไปที่ AJAX เพื่ออัปโหลดรูปภาพในลักษณะเดียวกับวิธีเดียวกัน