J'ai vu que la zone de saisie d'un site Web prend en charge la fonction de prendre des captures d'écran et de les coller. J'ai pensé que c'était intéressant, alors j'ai sorti le code et je l'ai partagé.

Malheureusement, actuellement, seules les versions supérieures du navigateur Chrome prennent en charge le collage direct de cette manière, et les autres navigateurs ne sont actuellement pas en mesure de coller (IE11 n'a pas été testé). Bien sûr, cette fonction d'expérience utilisateur améliorée est mieux que rien.

Code de structure de la zone de saisie :

Copier le code Le code est le suivant :

Liez l'événement coller à la zone de saisie :

Copier le code Le code est le suivant :

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

input.addEventListener( 'paste', function( event ){
// faire quelque chose...
});

L'objet d'interface Event de l'événement Paste fournit une interface clipboardData, qui enregistre les données dans le presse-papiers du système. Comme mentionné ci-dessus, actuellement, seules les versions supérieures du navigateur Chrome peuvent accéder directement aux données dans le presse-papiers du système. Cela fournit une entrée pour une interaction directe avec la page Web après avoir pris une capture d'écran et enregistré l'image dans le presse-papiers.

La capture d'écran mentionnée ici fait référence à la capture d'écran fournie par QQ ou à la fonction de capture d'écran de la clé PrtScn fournie avec le système, ou à la fonction de capture d'écran fournie par un autre logiciel tiers.

Copier le code Le code est le suivant :

input.addEventListener( 'coller', fonction ( event ) {
 // Interface ajoutée à l'objet événement pour accéder au presse-papiers du système 
 var clipboardData = event.clipboardData,
 i = 0,
 items, item, types;

 if( clipboardData ){
 items = clipboardData.items;

 if( !items ){
 return;
 }

 item = items[0]; 
                    // Types de données enregistrés dans le presse-papiers i] === 'Fichiers' ){
                  item = items[i];                                                                                                                                                                       🎜> if ( item && item.kind === 'file' && item.type .match(/^image//i) ){
                                                                                                                                                                   🎜> }
});

Après avoir récupéré les données d'image du presse-papiers, vous pouvez utiliser FileReader pour les lire. 

Copier le code

 Le code est le suivant :

var imgReader = function( item ){

var file = item.getAsFile(),

reader = new FileReader();

// Lire le fichier et l'afficher sur la page Web reader.onload = function( e ) { var img = new Image(); img.src = e.target.result; document.body.appendChild( img ); };

// Lire le fichier
reader.readAsDataURL( file );
};

Il peut être implémenté avec un code très court. Vous pouvez utiliser le code source suivant pour voir la démonstration.

Copier le code

Le code est le suivant :

< ;title>Utilisez clipboardData pour implémenter la fonction de capture d'écran et de collage dans les pages Web