ฉันเห็นว่ากล่องอินพุตของเว็บไซต์บางแห่งรองรับสกรีนช็อตและฟังก์ชั่นวางและฉันพบว่ามันน่าสนใจดังนั้นฉันจึงขุดรหัสและแชร์
น่าเสียดายที่เบราว์เซอร์ Chrome รุ่นที่สูงกว่าเท่านั้นที่รองรับการวางโดยตรงและเบราว์เซอร์อื่น ๆ ยังไม่สามารถวางได้ (IE11 ยังไม่ได้รับการทดสอบ) แน่นอนฟังก์ชั่นประสบการณ์การใช้งานที่ได้รับการปรับปรุงนี้ดีกว่าไม่มี
รหัสโครงสร้างของกล่องอินพุต:
การคัดลอกรหัสมีดังนี้:
<input type = "text" id = "testinput" />
ผูกเหตุการณ์วางสำหรับกล่องอินพุต:
การคัดลอกรหัสมีดังนี้:
var input = document.getElementById ('testInput');
input.addeventListener ('วาง', ฟังก์ชั่น (เหตุการณ์) {
// dosomething ...
-
วัตถุอินเทอร์เฟซเหตุการณ์สำหรับการวางเหตุการณ์จะให้อินเทอร์เฟซ ClipboardData ซึ่งบันทึกข้อมูลในคลิปบอร์ดระบบ ดังที่ได้กล่าวมาแล้วเฉพาะเบราว์เซอร์ Chrome รุ่นที่สูงกว่าเท่านั้นที่สามารถเข้าถึงข้อมูลของคลิปบอร์ดระบบได้โดยตรง นี่เป็นทางเข้าสำหรับรูปภาพที่บันทึกไว้ในคลิปบอร์ดเพื่อโต้ตอบโดยตรงบนหน้าเว็บหลังจากภาพหน้าจอ
ภาพหน้าจอที่กล่าวถึงที่นี่คือภาพหน้าจอที่จัดทำโดย QQ หรือฟังก์ชั่นภาพหน้าจอของคีย์ PRTSCN ที่จัดทำโดยระบบหรือฟังก์ชั่นภาพหน้าจอที่จัดทำโดยซอฟต์แวร์บุคคลที่สามอื่น ๆ
การคัดลอกรหัสมีดังนี้:
input.addeventListener ('วาง', ฟังก์ชั่น (เหตุการณ์) {
// อินเทอร์เฟซเพื่อเข้าถึงคลิปบอร์ดระบบที่เพิ่มลงในวัตถุเหตุการณ์
var clipboardData = event.clipboardData
i = 0,
รายการรายการประเภท;
if (clipboardData) {
รายการ = clipboardData.Items;
ถ้า (! รายการ) {
กลับ;
-
รายการ = รายการ [0];
// ประเภทข้อมูลที่บันทึกไว้ในคลิปบอร์ด
types = clipboardData.types || -
สำหรับ (; i <types.length; i ++) {
if (ประเภท [i] === 'ไฟล์') {
รายการ = รายการ [i];
หยุดพัก;
-
-
// ตรวจสอบว่าเป็นข้อมูลรูปภาพหรือไม่
if (item && item.kind === 'ไฟล์' && item.type.match (/^image /// i)) {
// อ่านรูปภาพ
imgreader (รายการ);
-
-
-
หลังจากได้รับข้อมูลภาพจากคลิปบอร์ดคุณสามารถใช้ filereader เพื่ออ่านได้
การคัดลอกรหัสมีดังนี้:
var imGreader = function (รายการ) {
var file = item.getAsFile ()
reader = new filereader ();
// หลังจากอ่านไฟล์แล้วจะปรากฏบนหน้าเว็บ
reader.onload = function (e) {
var img = ภาพใหม่ ();
img.src = e.target.result;
document.body.appendchild (IMG);
-
// อ่านไฟล์
reader.readasdataurl (ไฟล์);
-
มีการใช้รหัสสั้นมากคุณสามารถใช้ซอร์สโค้ดต่อไปนี้เพื่อดูการสาธิต
การคัดลอกรหัสมีดังนี้:
<! doctype html>
<html lang = "en-us">
<head>
<meta charset = "utf-8">
<title> ใช้ ClipboardData เพื่อใช้ฟังก์ชั่นภาพหน้าจอและวางในหน้าเว็บ </title>
<style type = "text/css">
#Box {WIDTH: 200PX; ความสูง: 200px; ชายแดน: 1px Solid #DDD; -
</style>
</head>
<body>
<H1> ใช้ ClipboardData เพื่อใช้ฟังก์ชั่นภาพหน้าจอและวางในหน้าเว็บ </h1>
<HR />
<div> <อินพุต type = "text" id = "testinput" placeholder = "วางในกล่องอินพุตหลังจากภาพหน้าจอ" size = "30" /> </div>
<script type = "text/javascript">
(การทำงาน(){
var imGreader = function (รายการ) {
var blob = item.getasfile ()
reader = new filereader ();
reader.onload = function (e) {
var img = ภาพใหม่ ();
img.src = e.target.result;
document.body.appendchild (IMG);
-
reader.readasdataurl (หยด);
-
document.getElementById ('testInput') .AddeVentListener ('วาง', ฟังก์ชั่น (e) {
var clipboardData = e.clipboardData
i = 0,
รายการรายการประเภท;
if (clipboardData) {
รายการ = clipboardData.Items;
ถ้า (! รายการ) {
กลับ;
-
รายการ = รายการ [0];
types = clipboardData.types || -
สำหรับ (; i <types.length; i ++) {
if (ประเภท [i] === 'ไฟล์') {
รายการ = รายการ [i];
หยุดพัก;
-
-
if (item && item.kind === 'ไฟล์' && item.type.match (/^image /// i)) {
imgreader (รายการ);
-
-
-
-
</script>
</body>
</html>