Ich habe gesehen, dass das Eingabefeld einer bestimmten Website eine Screenshot- und Einfügefunktion unterstützt, und fand sie interessant, also habe ich den Code ausgegraben und ihn geteilt.
Leider unterstützt nur die höhere Version des Chrome -Browsers direkte Einfügen, und andere Browser konnten bisher nicht einfügen (IE11 wurde nicht getestet). Natürlich ist diese verbesserte Benutzererfahrungsfunktion besser als keine.
Der Strukturcode des Eingangsfelds:
Die Codekopie lautet wie folgt:
<Eingabe type = "text" id = "testinput" />
Binden Sie Paste -Ereignisse für den Eingabefeld:
Die Codekopie lautet wie folgt:
var input = document.getElementById ('testinput');
input.addeventListener ('paste', Funktion (Ereignis) {
// Dosen etwas ...
});
Das Event -Schnittstellenobjekt zum Einfügen von Ereignissen bietet eine ClipboardData -Schnittstelle, die die Daten in der System -Zwischenablage speichert. Wie oben erwähnt, können nur höhere Versionen von Chrombrowsern direkt auf die Daten der Systemklemme zugreifen. Dies bietet einen Eingang für die in der Zwischenablage gespeicherten Bilder, um direkt auf der Webseite nach dem Screenshot zu interagieren.
Der hier erwähnte Screenshot ist der von QQ oder die von dem System bereitgestellte Screenshot-Funktion bereitgestellte Screenshot oder die von einer anderen Drittanbieter-Software bereitgestellte Screenshot-Funktion.
Die Codekopie lautet wie folgt:
input.addeventListener ('paste', Funktion (Ereignis) {
// Die Schnittstelle zum Zugriff auf die Systemklemme, die dem Ereignisobjekt hinzugefügt wurde
var clipboardData = event.clipboardData,
i = 0,
Elemente, Artikel, Typen;
if (clipboardData) {
items = clipboardData.Items;
if (! items) {
zurückkehren;
}
item = items [0];
// Datentyp in der Zwischenablage gespeichert
Typen = clipboardData.types || [];
für (; i <Typen.Length; i ++) {
if (Typen [i] === 'Dateien') {
item = items [i];
brechen;
}
}
// Bestimmen Sie, ob es sich um Bilddaten handelt
if (item && item.kind === 'Datei' && item.type.match (/^image /// i)) {
// Lesen Sie das Bild
ImGreader (Element);
}
}
});
Nachdem Sie die Bilddaten aus der Zwischenablage erhalten haben, können Sie Fileeader verwenden, um sie zu lesen.
Die Codekopie lautet wie folgt:
var imGreader = function (item) {
var file = item.getasfile (),
Reader = new FileReader ();
// Nach dem Lesen der Datei wird sie auf der Webseite angezeigt
Reader.onload = Funktion (e) {
var img = new Image ();
img.src = e.target.Result;
document.body.appendchild (IMG);
};
// Lesen Sie die Datei
Reader.ReadasDataurl (Datei);
};
Der sehr kurze Code wird implementiert. Sie können den folgenden Quellcode verwenden, um die Demonstration anzuzeigen.
Die Codekopie lautet wie folgt:
<! DocType html>
<html lang = "en-us">
<kopf>
<meta charset = "utf-8">
<titels> Verwenden Sie ClipboardData, um Screenshot zu implementieren und Funktionen in Webseiten einzufügen. </title>
<style type = "text/css">
#Box {width: 200px; Höhe: 200px; Grenze: 1PX Solid #ddd; }
</style>
</head>
<body>
<h1> Verwenden Sie ClipboardData, um Screenshot zu implementieren und Funktionen in Webseiten zu fügen. </h1>
<hr />
<div> <Eingabe type = "text" id = "testinput" placeholder = "Einfügen im Eingangsfeld nach Screenshot" size = "30" /> < /div>
<script type = "text/javaScript">
(Funktion(){
var imGreader = function (item) {
var blob = item.getasfile (),
Reader = new FileReader ();
Reader.onload = Funktion (e) {
var img = new Image ();
img.src = e.target.Result;
document.body.appendchild (IMG);
};
Reader.ReadasDataurl (Blob);
};
document.getElementById ('testinput') .AdDeVentListener ('paste', Funktion (e) {
var clipboardData = e.clipboardData,
i = 0,
Elemente, Artikel, Typen;
if (clipboardData) {
items = clipboardData.Items;
if (! items) {
zurückkehren;
}
item = items [0];
Typen = clipboardData.types || [];
für (; i <Typen.Length; i ++) {
if (Typen [i] === 'Dateien') {
item = items [i];
brechen;
}
}
if (item && item.kind === 'Datei' && item.type.match (/^image /// i)) {
ImGreader (Element);
}
}
});
}) ();
</script>
</body>
</html>