Actuellement, seule la version supérieure du navigateur Chrome prend en charge la collation directe. D'autres navigateurs ne peuvent pas coller jusqu'à présent. Cependant, l'image prise par Firefox et les navigateurs IE11 peut coller des captures d'écran dans les DIV modifiables est également Base64 Bit et Chrome utilise ClipboardData. Cependant, dans les navigateurs Firefox et IE11, il n'est pas possible d'obtenir directement des données Base64 d'images à l'aide de Clips de presse. Il est livré avec ses propres données IMG directes.
Exemple complet:
<! Doctype html> <html lang = "en-us"> <éadf> <meta charset = "utf-8"> <tight> Utilisez ClipboardData pour implémenter les fonctions d'écran et de coller dans les pages Web </ title> <style type = "Text / CSS"> .box {width: 500px; hauteur: 300px; Border: 1px solide #ddd; } .box img {max-width: 480px; max-height: 100%; Text-Align: Center;} </ Style> </ head> <body> <div ContentEdIT = "true" id = "TesInput"> </div> <script type = "Text / JavaScript"> (function () {var imGeader = function (item) {var blob = item.getasfile (), lecter = new FileReder (); Reader.OnLoad = fonction (e) {var img = new FileReder (); Reader.Onload = fonction (e) {var img = new FileReder (); Reader.OnLoad = fonction (e) {var img = new FileReder (); Reader.Onload = fonction (e) {var img = newsideReder (); Reader.OnLoad = fonction (e) {Var img = IMageReder (); Readers IMG.Src = E.Target.result; //window.clipboarddata.getData("text ") obtenez du contenu collé sous e.clipboarddata.getData (" Text / PLAIN ") Firefox SET CONTENU DE CONTENU SUIVANT GOOGLE //ALERT(E.CLIPBOINGDATA.GETDATA( SOUTEURS/PLAIN")) VAR Clipboarddata = E.ClipboardData, // Google I = 0, Items, Tapy; Console.log (0 ') if (ClipboardData) {console.log (' 1 ') 'Files') {item = items [i]; </cript> </ script> </ body> </html>Exemple 2:
<! Doctype html> <html lang = "en"> <éadf> <meta charset = "utf-8"> <itle> Document </ title> </ head> <body> <div id = "div" ContentEtable = "true"> </div> <script> var div. div.AddeventListener ('Paste', fonction (e) {if (e.clipboardData) {for (var i = 0; i <e.clipboardData.items.length; i ++) {var c = e.clipboarddata.items [i]; var f = c.getasfile () div.innerhtml + = '<img src = "' + e.target.result + '">';} Reader.readaSdataurl (f);}}}); </cript> </ body> </html>Méthode d'implémentation:
Méthode 1: Dans Chrome Browser, vous pouvez obtenir directement des données d'image de capture d'écran via ClipboardData. Vous pouvez utiliser AJAX pour transmettre les données en arrière-plan, puis renvoyer l'adresse d'image avec le nom de domaine par le développement d'arrière-plan.
Méthode 2: Étant donné que les données d'image ne peuvent pas être obtenues directement dans des navigateurs tels que Firefox, vous pouvez obtenir les données IMG dans la div sous forme de données URL Base64 lors du collage, puis utiliser Ajax comme même méthode.
Méthode 3: Lorsque vous cliquez sur la publication ou l'enregistrement des messages, vous pouvez obtenir les données d'IMG dans le DIV en tant que données d'URL Base64, puis utiliser AJAX en même temps. S'il y a plusieurs images, une boucle ou en cliquant sur Enregistrer et la publication, le processus de développement back-end sera effectué et les informations d'affichage retournées seront traitées directement. De cette façon, nous n'avons pas besoin de remplacer l'URL de base64 par l'adresse par le nom de domaine renvoyé par le back-end dans le div.
Méthode 4: Lors du collage dans le div, une couche contextuelle apparaît, puis un aperçu de l'image avec des captures d'écran dans le calque contextuel peut confirmer le bouton de téléchargement. Cliquez sur le bouton Télécharger pour accéder à Ajax pour télécharger l'image de la même manière que la même méthode