J'ai vu que la boîte de saisie d'un certain site Web prend en charge la capture d'écran et la fonction de pâte, et je l'ai trouvée intéressante, j'ai donc déterré le code et l'ai partagé.
Malheureusement, seule la version supérieure du navigateur Chrome prend en charge la collation directe, et d'autres navigateurs n'ont pas pu coller jusqu'à présent (IE11 n'a pas été testé). Bien sûr, cette fonction d'expérience utilisateur améliorée est meilleure que rien.
Le code de structure de la boîte d'entrée:
La copie de code est la suivante:
<input type = "text" id = "testinput" />
Lier les événements de la pâte pour la boîte d'entrée:
La copie de code est la suivante:
var input = document.getElementById ('testinput');
input.adDeventListener ('Paste', fonction (événement) {
// Dosomething ...
});
L'objet d'interface d'événement pour le collage des événements fournit une interface de presse-papiers, qui enregistre les données dans le presse-papiers système. Comme mentionné ci-dessus, seules les versions plus élevées des navigateurs Chrome peuvent accéder directement aux données du presse-papiers système. Cela fournit une entrée pour les images enregistrées dans le presse-papiers pour interagir directement sur la page Web après la capture d'écran.
La capture d'écran mentionnée ici est la capture d'écran fournie par QQ ou la fonction de capture d'écran de la clé PRTSCN fournie par le système, ou la fonction de capture d'écran fournie par d'autres logiciels tiers.
La copie de code est la suivante:
input.adDeventListener ('Paste', fonction (événement) {
// l'interface pour accéder au presse-papiers système ajouté à l'objet de l'événement
var ClipboardData = event.clipboardData,
i = 0,
articles, article, types;
if (ClipsboardData) {
Items = ClipboardData.Items;
if (! items) {
retour;
}
item = items [0];
// Type de données enregistré dans le presse-papiers
Types = ClipboardData.Types || [];
pour (; i <types.length; i ++) {
if (types [i] === 'files') {
item = items [i];
casser;
}
}
// déterminer s'il s'agit de données d'image
if (item && item.kind === 'file' && item.type.match (/ ^ image /// i)) {
// Lire l'image
iMGreader (item);
}
}
});
Après avoir obtenu les données d'image à partir du presse-papiers, vous pouvez utiliser FileReader pour les lire.
La copie de code est la suivante:
var imGeader = fonction (item) {
var fichier = item.getasfile (),
lecteur = nouveau fileReader ();
// Après avoir lu le fichier, il sera affiché sur la page Web
reader.onload = function (e) {
var img = new image ();
img.src = e.target.result;
Document.Body.ApendChild (IMG);
};
// Lire le fichier
Reader.ReadAsDataurl (fichier);
};
Le code très court est implémenté, vous pouvez utiliser le code source suivant pour voir la démonstration.
La copie de code est la suivante:
<! Doctype html>
<html lang = "en-us">
<adal>
<meta charset = "utf-8">
<Title> Utilisez ClipboardData pour implémenter des captures d'écran et coller les fonctions dans les pages Web </TITAL>
<style type = "text / css">
#box {largeur: 200px; hauteur: 200px; Border: 1px solide #ddd; }
</ style>
</ head>
<body>
<h1> Utilisez ClipboardData pour implémenter la capture d'écran et coller les fonctions dans les pages Web </H1>
<hr />
<div> <entrée type = "text" id = "testinput" placeholder = "Coller dans la zone d'entrée après capture d'écran" size = "30" /> </div>
<script type = "text / javascript">
(fonction(){
var imGeader = fonction (item) {
var blob = item.getasfile (),
lecteur = nouveau fileReader ();
reader.onload = function (e) {
var img = new image ();
img.src = e.target.result;
Document.Body.ApendChild (IMG);
};
Reader.readasdataurl (blob);
};
document.getElementById ('TesInTput') .AddeventListener ('Paste', fonction (e) {
Var ClipboardData = E.ClipboardData,
i = 0,
articles, article, types;
if (ClipsboardData) {
Items = ClipboardData.Items;
if (! items) {
retour;
}
item = items [0];
Types = ClipboardData.Types || [];
pour (; i <types.length; i ++) {
if (types [i] === 'files') {
item = items [i];
casser;
}
}
if (item && item.kind === 'file' && item.type.match (/ ^ image /// i)) {
iMGreader (item);
}
}
});
}) ();
</cript>
</docy>
</html>