Saat ini, hanya versi browser Chrome yang lebih tinggi yang mendukung pemasangan langsung. Browser lain tidak dapat menempel sejauh ini. Namun, gambar yang diambil oleh Firefox dan browser IE11 dapat menempelkan tangkapan layar di Divs yang dapat diedit juga bit64 bit dan chrome menggunakan clipboarddata. Namun, di browser Firefox dan IE11, tidak mungkin untuk secara langsung mendapatkan data base64 gambar menggunakan clipboarddata. Muncul dengan data IMG langsungnya sendiri.
Contoh Lengkap:
<! Doctype html> <html lang = "en-us"> <head> <meta charset = "UTF-8"> <Title> Gunakan clipboarddata untuk mengimplementasikan fungsi tangkapan layar dan paste di halaman web </iteme> <style type = "text/css"> .box {wight: 500px; Tinggi: 300px; Perbatasan: 1px solid #ddd; } .box img {max-width: 480px; Max-Height: 100%; text-align: center;}</style></head><body><div 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; //window.clipboarddata.getData("Text ") dapatkan konten yang disisipkan di bawah E.clipboardData.getData (" Teks/Polos ") Firefox dapatkan konten di bawah Google //alert(e.clipboardData.getData("Text/Plain") var clipboarddata, e.clipboard, ooPboard, ooPboard, o. Console.log ('0') if (clipboarddata) {console.log ('1') item = clipboarddata.items; 'File') {item = [i]; </script> </script> </body> </html>Contoh 2:
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <itement> dokumen </title> </head> <body> <Div id = "Div" 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 roader = = {var roader = (i]; var f = c.getAsfile (); var roader = {var var) {var); div.innerHtml + = '<img src = "' + e.target.Result + '">'; </script> </body> </html>Metode Implementasi:
Metode 1: Di browser Chrome, Anda dapat langsung mendapatkan data gambar tangkapan layar melalui ClipboardData. Anda dapat menggunakan AJAX untuk meneruskan data ke latar belakang, dan kemudian mengembalikan alamat gambar dengan nama domain dengan pengembangan latar belakang.
Metode 2: Karena data gambar tidak dapat diperoleh secara langsung di browser seperti Firefox, Anda dapat memperoleh data IMG di DIV sebagai data URL Base64 saat menempel, dan kemudian menggunakan AJAX sebagai metode yang sama.
Metode 3: Saat mengklik pada penerbitan atau menyimpan pesan, Anda dapat memperoleh data IMG di div sebagai data URL Base64, dan kemudian menggunakan AJAX secara bersamaan. Jika ada beberapa gambar, loop, atau saat mengklik Simpan dan Penerbitan, proses pengembangan back-end akan dilakukan, dan informasi tampilan yang dikembalikan akan diproses secara langsung. Dengan cara ini, kita tidak perlu mengganti URL base64 dengan alamat dengan nama domain yang dikembalikan oleh back-end di div.
Metode 4: Saat menempel di div, lapisan pop-up muncul, dan kemudian pratinjau gambar dengan tangkapan layar di lapisan pop-up dapat mengkonfirmasi tombol unggahan. Klik tombol Unggah untuk pergi ke Ajax untuk mengunggah gambar dengan cara yang sama seperti metode yang sama