Derzeit unterstützt nur die höhere Version des Chrome -Browsers direkte Einfügen. Andere Browser können bisher nicht einfügen. Das von Firefox- und IE11 -Browsern aufgenommene Bild kann jedoch auch Screenshots in bearbeitbaren Divs einfügen. In Firefox- und IE11 -Browsern ist es jedoch nicht möglich, Base64 -Bilder mithilfe von ClipboardData direkt zu erhalten. Es kommt mit eigenen direkten IMG -Daten.
Vollständiges Beispiel:
<! DocType html> <html Lang = "en-us"> <kopf> <meta charset = "utf-8"> <titels> Verwenden Sie ClipboardData, um ScreenShot zu implementieren und Funktionen in Webseiten zu fügen. Höhe: 300px; Grenze: 1PX Solid #ddd; } .box img {max-Width: 480px; maximal hohe: 100%; text-align: center;} </style> </head> <body> <div inhaltlich = "true" id = "testInput"> </div> <skript type = "text/javaScript"> (function () {var imGreader = function (item) {var blob = item.getAsFile (), var iMerader = new = new = new = new = new = new = new = new = new = new = new = new = new = new = new = new = new = new = new = new = new = new = new); IMG.Src = E.Target.Result; //window.clipboardData.getData("Text") Get pasted content under e.clipboardData.getData("text/plain") Firefox Get pasted content under Google //alert(e.clipboardData.getData("text/plain") ) var clipboardData = e.clipboardData,//Google i = 0, items, item, types; console.log ('0') if (clipdata) {console 'Dateien') {item = items [i]; </script> </script> </body> </html>Beispiel 2:
<! DocType html> <html Lang = "en"> <head> <meta charset = "utf-8"> <title> document </title> </head> <body> <div id = "div" contenteditable = "true"> </div> <script> variable document.getElementById ('divDeBleditable (' divDedable '); Div.AdDeVentListener ('paste', function (e) {if (e.clipboardData) {für (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 +'"> '; </script> </body> </html>Implementierungsmethode:
Methode 1: Im Chrome -Browser können Sie Screenshot -Bilddaten über ClipboardData direkt abrufen. Sie können AJAX verwenden, um die Daten an den Hintergrund zu übergeben und dann die Bildadresse mit dem Domänennamen durch die Hintergrundentwicklung zurückzugeben.
Methode 2: Da die Bilddaten nicht direkt in Browsern wie Firefox erhalten werden können, können Sie die IMG -Daten im DIV als Base64 -URL -Daten beim Einfügen erhalten und dann AJAX als dieselbe Methode verwenden.
Methode 3: Beim Klicken auf Veröffentlichung oder Speichern von Nachrichten können Sie die Daten von IMG im DIV als Basis64 -URL -Daten erhalten und gleichzeitig AJAX verwenden. Wenn mehrere Bilder, Schleifen oder beim Klicken auf Speichern und Veröffentlichung vorhanden sind, wird der Back-End-Entwicklungsprozess durchgeführt, und die zurückgegebenen Anzeigeinformationen werden direkt verarbeitet. Auf diese Weise müssen wir die Basis64-URL nicht durch die Adresse durch den vom Back-End im Div zurückgegebenen Domänennamen ersetzen.
Methode 4: Beim Einfügen in die DIV wird eine Popup-Ebene angezeigt, und dann kann eine Vorschau des Bildes mit Screenshots in der Popup-Ebene die Upload-Taste bestätigen. Klicken Sie auf die Schaltfläche Upload, um zu AJAX zu gehen, um das Bild genauso hochzuladen wie dieselbe Methode