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
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. 2. Zeichnen Sie das DOM auf Canvas, um die ursprüngliche DOM -Schnittstelle abzudeckenWenn 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})}}}} 3.. Fügen Sie einen Canvas -Simulations -Maus -Screenshot -Bereich hinzuDie 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 . V. 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
5. Speichern Sie das abgefangene Bild 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.
einsetzen Abhängigkeiten<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>Konfigurieren von Abkürzungsschlüssel
Screenshot ([16, 65], 27) // Starten Sie den Abkürzungstaste auf Shift+A;endlich
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.