Eine Screenshot-Demo basierend auf Canvas in HTML

Geschrieben am Anfang

Ich erinnere mich, dass ich zuvor einen Beitrag auf Renren gesehen habe, in dem eine Screenshot-Lösung auf JS-Basis erklärt wurde. Ich erinnere mich nicht an die Details, aber ich erinnere mich nur, dass es ziemlich interessant war und anscheinend Canvas verwendete? Deshalb habe ich vor, dieses Mal selbst eines zu schreiben, um die Ideen des Autors mit Ihnen zu teilen. Dies ist nur eine einfache Demo. Bitte melden Sie ein Problem, wenn Sie Fehler finden. Befolgen Sie die Konvention zum Posten der Codeadresse.

Rendern

Gesamtidee

• Tastenkombinationen für Start und Ende festlegen
• Zeichnen Sie nach dem Start das DOM in die Leinwand, um die ursprüngliche DOM-Schnittstelle abzudecken
• Fügen Sie eine Leinwand hinzu, um den Maus-Screenshot-Bereich zu simulieren
• Fügen Sie eine Leinwand hinzu, um die Browseroberfläche entsprechend dem Maus-Screenshot-Bereich zu zeichnen (aufgenommen von der ersten Leinwand).
• Speichern des aufgenommenen Bildes

1. Start-/End-Tastenkombinationen festlegen

Da Tastenkombinationen zu Konflikten führen können, hoffen wir, dass die Anzahl der Tastenkombinationen am Anfang nicht begrenzt ist. Daher verwenden wir ein Array, um sie im ersten Parameter zu übergeben.

Funktion Bildschirmfoto(quickStartKey, EndKey) {
  //Nicht verwenden...Erweiterte Zeichenfolge var keyLength = quickStartKey.length
  var isKeyTrigger = {}
  var cantStartShot = false
  ...
  quickStartKey.forEach(function(item) { //Das Parameter-Array durchlaufen isKeyTrigger[item] = false //Keine Tasten im Standard-Array werden ausgelöst})
  $('html').on('keyup', Funktion(e) {
    var Schlüsselcode = e.which
    wenn(Schlüsselcode === Endschlüssel) {
      ...
    } sonst wenn(!cantStartShot) {
      isKeyTrigger[Schlüsselcode] = true
      var nichtTrigger = Objekt.keys(isKeyTrigger).filter(Funktion(Element) {
        return isKeyTrigger[item] === false // Prüfen, ob eine Tastenkombination vorhanden ist, die ausgelöst werden muss})
      if(notTrigger.length === 0) { //Es muss keine Tastenkombination gedrückt werden, um den Screenshot zu starten cantStartShot = true
        beginShot(kannShot nicht starten)
      }
    }
  })

2. Zeichnen Sie das DOM in die Leinwand, um die ursprüngliche DOM-Schnittstelle abzudecken

Wenn Sie die native Methode verwenden, können Sie sich auf die Einführung zum Zeichnen von DOM im Canvas unter MDN beziehen. Der schwierige Teil besteht darin, dass Sie ein SVG-Bild erstellen müssen, das das im <foreignObject>-Element enthaltene XML enthält. Das Berechnen und Extrahieren des vom aktuellen Browser angezeigten DOM ist eigentlich am umständlichsten. Nun, eigentlich hat der Autor keine guten Ideen, um ein = manuell zu implementieren. =, also habe ich hierfür die html2canvas-Bibliothek ausgewählt. Die allgemeine Aufrufmethode ist wie folgt:

Funktion beginShot(kannShot nichtStarten) {
    wenn(kannShot nichtStarten) {
        html2canvas(Dokument.Textkörper, {
            onrendered: Funktion (Leinwand) {
                //Holen Sie sich ein Canvas-Bild, das mit der Schnittstelle übereinstimmt}
        })
    }
}

3. Fügen Sie eine Leinwand hinzu, um den Maus-Screenshot-Bereich zu simulieren

Die Implementierung dieser Stelle war ursprünglich für die Verwendung der nativen Canvas-API vorgesehen, bringt jedoch das Problem mit sich, dass die Leinwand nach dem Drücken der Maus und dem Beginn des Ziehens in Echtzeit gezeichnet werden muss. Dies erfordert ein Konzept ähnlich den PS-Ebenen. Bei jeder Mausbewegung wird ein aktueller Screenshot-Frame gezeichnet, bei der nächsten Mausbewegung wird jedoch der vorherige Screenshot-Frame gelöscht. Dies simuliert den Zeichenvorgang in Echtzeit. Leider hat der Autor keine Möglichkeit gefunden, die native API von Canvas zu verwenden. Wenn ja, sagen Sie mir bitte, wie ich das gezeichnete Bild markieren kann. Hier verwendet der Autor eine Jq-basierte Canvas-Bibliothek namens Jcanvas, die das Konzept von Ebenen bereitstellt, d. h. auf einer Ebene kann nur ein Bild gezeichnet werden und die Ebene kann mit einem Namen versehen werden. Dies entspricht den Bedürfnissen des Autors und wird wie folgt umgesetzt:

$('#' + canvasId).mousedown(Funktion(e) {
    $("#"+canvasId).removeLayer(layerName) //Vorherige Ebene löschen layerName += 1
    startX = that._calculateXY(e).x //Mausposition berechnen startY = that._calculateXY(e).y
    isShot = wahr
    $("#"+canvasId).addLayer({
        Typ: „Rechteck“, //Rechteck …
        name:layerName, //Ebenenname x: startX,
        y: startY,
        Breite: 1,
        Höhe: 1
    })
}).Mausbewegung(Funktion(e) {
    wenn(istSchuss) {
        $("#"+canvasId).removeLayer(Ebenenname)
        var moveX = das._calculateXY(e).x
        var moveY = das._calculateXY(e).y
        var width = moveX - startX
        var Höhe = moveY - startY
        $("#"+canvasId).addLayer({
            Typ: "Rechteck",
            ...
            Name:Ebenenname,
            vonCenter: false,
            x: startX,
            y: startY,
            Breite: Breite,
            Höhe: Höhe
        })
        $("#"+canvasId).drawLayers(); //Zeichnen}
    })

4. Fügen Sie eine Leinwand hinzu, um die Browseroberfläche entsprechend dem Maus-Screenshot-Bereich zu zeichnen

var canvasResult = document.getElementById('canvasResult')
              var ctx = canvasResult.getContext("2d");
              ctx.drawImage(copyDomCanvas, moveX – startX > 0? startX: moveX, moveY – startY > 0? startY: moveY, Breite, Höhe, 0, 0, Breite, Höhe)
              var dataURL = canvasResult.toDataURL("image/png");

Das Bild wird mit drawImage aufgenommen und anschließend mit der Methode toDataURL in Base64-Kodierung konvertiert.

5. Speichern Sie das aufgenommene Bild

Funktion downloadFile(el, Dateiname, href){
      el.attr({
        'download':Dateiname,
        'href': href
      })
  }
  ...
Datei herunterladen($('.ok'), 'Bildschirmfoto' + Math.random().toString().split('.')[1] || Math.random() + '.png', Daten-URL)
// Übergeben Sie das Schaltflächenobjekt, einen zufälligen Namen zum Speichern des Bildes und ein Base64-codiertes Bild.

Dabei wird das Download-Attribut des a-Tags genutzt und durch Anklicken durch den Nutzer kann der Download direkt durchgeführt werden.

einsetzen

Abhängigkeiten

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

Konfigurieren von Tastenkombinationen

screenShot([16, 65], 27) // Die Start-Tastenkombination ist Umschalt+A; die Beenden-Taste ist ESC

endlich

Die ekelhaftesten Teile des Artikels (DOM-Schreiben auf Canvas, Canvas-Einstellungsebenen) werden jeweils mithilfe von zwei Bibliotheken implementiert. In Zukunft wird sich der Autor weiterhin darauf konzentrieren, wie diese Vorgänge mithilfe nativer APIs implementiert werden können, obwohl ich persönlich denke, dass mein Schreiben immer noch ein bisschen ... .

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.