Saya melihat bahwa kotak input dari situs web tertentu mendukung tangkapan layar dan fungsi pasta, dan saya merasa menarik, jadi saya menggali kode dan membagikannya.
Sayangnya, hanya versi yang lebih tinggi dari browser Chrome yang mendukung pemasangan langsung, dan browser lain yang belum dapat menempel sejauh ini (IE11 belum diuji). Tentu saja, fungsi pengalaman pengguna yang ditingkatkan ini lebih baik daripada tidak sama sekali.
Kode struktur kotak input:
Salinan kode adalah sebagai berikut:
<input type = "text" id = "testInput" />
Bind Tempel Acara untuk Kotak Input:
Salinan kode adalah sebagai berikut:
var input = document.geteLementById ('testInput');
input.addeventListener ('paste', function (event) {
// dosomething ...
});
Objek Acara Antarmuka untuk Memasukkan Acara Menyediakan Antarmuka ClipboardData, yang menyimpan data di System Clipboard. Seperti disebutkan di atas, hanya versi browser chrome yang lebih tinggi yang dapat secara langsung mengakses data papan klip sistem. Ini menyediakan pintu masuk untuk gambar yang disimpan ke clipboard untuk berinteraksi langsung di halaman web setelah tangkapan layar.
Tangkapan layar yang disebutkan di sini adalah tangkapan layar yang disediakan oleh QQ atau fungsi tangkapan layar dari kunci PRTSCN yang disediakan oleh sistem, atau fungsi tangkapan layar yang disediakan oleh perangkat lunak pihak ketiga lainnya.
Salinan kode adalah sebagai berikut:
input.addeventListener ('paste', function (event) {
// Antarmuka untuk mengakses System Clipboard yang ditambahkan ke objek acara
var clipboarddata = event.clipboarddata,
i = 0,
item, item, jenis;
if (clipboarddata) {
item = clipboarddata.items;
if (! item) {
kembali;
}
item = item [0];
// Jenis data disimpan di clipboard
type = clipboarddata.types || [];
untuk (; i <type.length; i ++) {
if (type [i] === 'file') {
item = item [i];
merusak;
}
}
// Tentukan apakah itu data gambar
if (item && item.kind === 'file' && item.type.match (/^image /// i)) {
// Baca gambarnya
Imgreader (item);
}
}
});
Setelah mendapatkan data gambar dari clipboard, Anda dapat menggunakan filereader untuk membacanya.
Salinan kode adalah sebagai berikut:
var imgreader = function (item) {
var file = item.getAsfile (),
pembaca = filereader baru ();
// Setelah membaca file, itu akan ditampilkan di halaman web
reader.onload = function (e) {
var img = gambar baru ();
img.src = e.target.Result;
document.body.appendchild (IMG);
};
// Baca file
reader.readasdataurl (file);
};
Kode yang sangat singkat diimplementasikan, Anda dapat menggunakan kode sumber berikut untuk melihat demonstrasi.
Salinan kode adalah sebagai berikut:
<! Doctype html>
<html lang = "en-us">
<head>
<meta charset = "UTF-8">
<title> Gunakan clipboarddata untuk mengimplementasikan fungsi tangkapan layar dan tempel di halaman web </iteme>
<type style = "text/css">
#box {width: 200px; Tinggi: 200px; Perbatasan: 1px solid #ddd; }
</tyle>
</head>
<body>
<h1> Gunakan ClipboardData untuk mengimplementasikan fungsi tangkapan layar dan paste di halaman web </h1>
<hr />
<div> <input type = "text" id = "testInput" placeholder = "Tempel di kotak input setelah tangkapan layar" size = "30" /> </div>
<type skrip = "Teks/JavaScript">
(fungsi(){
var imgreader = function (item) {
var blob = item.getAsfile (),
pembaca = filereader baru ();
reader.onload = function (e) {
var img = gambar baru ();
img.src = e.target.Result;
document.body.appendchild (IMG);
};
reader.readasdataurl (blob);
};
document.geteLementById ('testInput') .addeventListener ('paste', function (e) {
var clipboarddata = e.clipboarddata,
i = 0,
item, item, jenis;
if (clipboarddata) {
item = clipboarddata.items;
if (! item) {
kembali;
}
item = item [0];
type = clipboarddata.types || [];
untuk (; i <type.length; i ++) {
if (type [i] === 'file') {
item = item [i];
merusak;
}
}
if (item && item.kind === 'file' && item.type.match (/^image /// i)) {
Imgreader (item);
}
}
});
}) ();
</script>
</body>
</html>