HTML basierend auf einem Screenshot der Canvas -Implementierung

Ich erinnere mich, dass ich einen Teilen von JS -basierten Screenshot -Lösungen erlebt habe. Dieses Mal habe ich vor, eine Idee zu schreiben, mit allen zu teilen. Dies ist nur eine sehr einfache kleine Demo. Nach der üblichen PO -Codeadresse.

Renderings

Gesamtdenken

• Stellen Sie den Start/End -Verknüpfungsschlüssel ein
• Nach dem Start wird DOM auf Leinwand gezogen, um die ursprüngliche DOM -Schnittstelle abzudecken
• Fügen Sie einen Canvas -Simulation -Maus -Screenshot -Bereich hinzu
• Fügen Sie eine Leinwand hinzu, um die Browser -Schnittstelle zu zeichnen, die dem Maus -Screenshot -Bereich entspricht (abgefangen von der ersten Leinwand)
• Speichern Sie das abgefangene Bild

Da die Abkürzungsschlüssel Konflikte verursachen können, können die Abkürzungsschlüssel die Anzahl der Abkürzungsschlüssel nicht einschränken, sodass die Form eines Arrays im ersten Parameter übergeben wird.

 Funktionscreenshot (QuickStartKey, EndKey) {// Kompatibilität in Betracht ziehen, nicht zu verwenden ... Extended String var keyLength = QuickStartKey.Length var waskeyTigger = {} var cantshot = false ... Q uickstartKey. Durchqueren von Parameter -Arrays IsKeyTigger [item] = false // alle Schlüssel im Standardarray werden nicht ausgelöst}) $ ('HTML'). = = EndKey) {...} else if (! CantstartShot) {isKeyTreger [KeyCode] = True var Nottrigger = Object.Keys (IsKeyTriigger). ausgelöst werden}) if (Nottrigger.length === 0) {// Es gibt keinen Abkürzungschlüssel, der ausgelöst werden muss.

Wenn Sie eine native Methode anwenden, können Sie sich auf die Einführung von DOM unter dem MDN beziehen. Das Schwierigste ist, dass Sie ein Element erstellen müssen, das in einem SVG -Bild mit XML enthält. So berechnen das DOM, das im aktuellen Browser angezeigt wird, und extrahieren. Es ist tatsächlich das mühsamste. Tatsächlich hat der Autor keine gute Idee, eine = manuell zu implementieren =. =, Also habe ich diese HTML2CANVAS -Bibliothek ausgewählt, um dies zu vervollständigen. Die allgemeine Anrufmethode lautet wie folgt:

 FUNKTION FORTSHOT (cantstartShot) {if (cantstartShot) {html2canvas (document.body, {onrendered: function (canvas) {// Erhalten Sie das Canvas -Bild mit derselben Schnittstelle})}}}}

Die Realisierung dieses Ortes sollte ursprünglich die native Leinwand verwenden, aber nach dem Drücken der Maus müssen die Leinwand in Echtzeit gezogen werden. wird gelöscht, wenn es Mousemove ausgelöst hat. Simulieren Sie den Real -Time -Zeichnungsprozess. Der hilflose Autor hat die Methode zur Verwendung der nativen API von Canvas nicht gefunden. Hier verwendet der Autor eine JQ -basierte Leinwandbibliothek namens JCANVAs. Dies entspricht den Bedürfnissen des Autors, und die Erkenntnis ist wie folgt:

 $ ('#' +canvasid) .mouseDown (Funktion (e) {$ (# +canvasid) .removelayer (layername) // Layername += 1 startx = that._calculatexy (e) .x // berechnen Die Mausposition starty = that._calculationsXy (e) .y isShot = true $ (#+canvasid) .Addlayer ({Typ: 'Rechteck', // rechteckig ... Name: Layname, der Ebene Name x: startx, y : Starty, Breite: 1, Höhe: 1})}). = this._calculationsXy (e) .y var width = movex -startx var height = Movey -starty $ (#+canvasid) .Addlayer ({Typ: 'Rechteck', ... Name: Lay: Layername, Fromcenter: False false .

 var canvasresult = document.getElementById ('canvasResult') var ctx = canvasresult.getContext (2d); , 0, 0, Breite, Höhe) var dataurl = canvasResult.todataurl (Bild/PNG);

Unter ihnen wurde das Bild durch Drawimage abgefangen, und dann wurde das Bild unter Verwendung der Todataurl -Methode in Base64 -Codierung konvertiert

 Funktion Download (El, Dateiname, href) {El.attr ({'Download': Dateiname, 'href': href})} ... downloadFile ($ ('. OK'), 'Screenshot' + Math .Random ( .Random () .Tring ().

Unter ihnen kann das Download -Attribut des A -Tags direkt heruntergeladen werden, wenn der Benutzer klickt.

 <script src = https: //cdn.bootcs.com/jquery/3.2.1/jqury.min.js> </script> <script src = https: //cdn.bootcs.com/jcanvas/16.7.3/ jcanvas.min.js> </script> <script src = https: //cdn.bootcss.com/html2canvas/0.5.0-html2canvas.min.js> </script>

 Screenshot ([16, 65], 27) // Starten Sie den Abkürzungstaste auf Shift+A;

Der ekelhafteste Ort in dem Artikel (DOM schreibt mit Leinwand und Leinwandeinstellungen) verwendet zwei Bibliotheken zur Implementierung. dass es noch ein bisschen ist. Wesen

Das oben genannte ist der Inhalt dieses Artikels.