suchen

Heim  >  Artikel  >  Web-Frontend  >  JavaScript implementiert die Funktion zum Lesen der Zwischenablage und zum Einfügen von Screenshots in die Webseite_Javascript-Fähigkeiten

JavaScript implementiert die Funktion zum Lesen der Zwischenablage und zum Einfügen von Screenshots in die Webseite_Javascript-Fähigkeiten

WBOY
WBOYOriginal
2016-05-16 16:45:381954Durchsuche

Ich habe gesehen, dass das Eingabefeld einer Website die Funktion zum Erstellen und Einfügen von Screenshots unterstützt. Ich fand es interessant, also habe ich den Code herausgenommen und geteilt.

Leider unterstützen derzeit nur höhere Versionen des Chrome-Browsers das direkte Einfügen auf diese Weise, und andere Browser können derzeit nicht einfügen (IE11 wurde natürlich nicht getestet). Diese verbesserte Benutzererfahrungsfunktion ist natürlich besser als nichts.

Strukturcode des Eingabefelds:

Code kopieren Der Code lautet wie folgt:


Binden Sie das Einfügeereignis an das Eingabefeld:

Code kopieren Der Code lautet wie folgt:

var input = document.getElementById( 'testInput ' );

input.addEventListener( 'paste', function( event ){
// dosomething...
});

Das Event-Schnittstellenobjekt des Paste-Events stellt eine ClipboardData-Schnittstelle bereit, die die Daten in der Systemzwischenablage speichert. Wie oben erwähnt, können derzeit nur höhere Versionen des Chrome-Browsers direkt auf die Daten in der Systemzwischenablage zugreifen. Dies bietet einen Zugang zur direkten Interaktion mit der Webseite, nachdem ein Screenshot erstellt und das Bild in der Zwischenablage gespeichert wurde.

Der hier erwähnte Screenshot bezieht sich auf den von QQ bereitgestellten Screenshot oder die Screenshot-Funktion der mit dem System gelieferten PrtScn-Taste oder die Screenshot-Funktion anderer Software von Drittanbietern.

Code kopieren Der Code lautet wie folgt:

input.addEventListener( 'paste', function ( event ) {
// Schnittstelle zum Ereignisobjekt hinzugefügt, um auf die Systemzwischenablage zuzugreifen
var clipboardData = event.clipboardData,
i = 0,
items, item,types;

if( clipboardData ){
items = clipboardData.items;

if( !items ){
return;
}

item = items[0];
                    // In der Zwischenablage gespeicherte Datentypen i] === 'Dateien' ){
                  item = items[i];                                                                                                                                                    🎜> if ( item && item.kind === 'file' && item.type .match(/^image//i) ){
                                                                                                                                                                   🎜> }
});



Nachdem Sie die Bilddaten aus der Zwischenablage abgerufen haben, können Sie sie mit FileReader lesen.





Code kopieren


Der Code lautet wie folgt:
var imgReader = function( item ){

var file = item.getAsFile(),

reader = new FileReader();

// Datei lesen und auf der Webseite anzeigen reader.onload = function( e ) { var img = new Image(); img.src = e.target.result; document.body.appendChild( img ); };
// Datei lesen
reader.readAsDataURL( file );
};




Es kann mit einem sehr kurzen Code implementiert werden. Sie können den folgenden Quellcode verwenden, um die Demonstration anzusehen.



Code kopieren


Der Code lautet wie folgt:





< ;title>Verwenden Sie ClipboardData, um die Funktion des Screenshots und Einfügens in Webseiten zu implementieren.




Verwenden Sie ClipboardData, um den Screenshot zu realisieren und die Funktion einzufügen die Webseite< /h1>