Das Erfassen eines Screenshots eines bestimmten DOM-Elements auf einer Webseite ist eine häufige Anforderung für Webentwickler und -designer. Diese scheinbar einfache Aufgabe kann jedoch schnell zur Herausforderung werden. Das Problem liegt darin, dass Webseiten oft dynamisch sind und Elemente aufgrund verschiedener Faktoren ihre Position oder Größe ändern können. Darüber hinaus verfügen Browser über unterschiedliche Rendering-Engines, was das Aufnehmen eines Screenshots weiter erschweren kann.

Problem

Wir haben die Notwendigkeit erkannt, diese Funktion zu integrieren und gleichzeitig ein personalisiertes Anmerkungstool in der Anwendung zu verwenden. Dieses Widget erleichtert die Erstellung von Markierungen auf Bildern, begleitet von Beschreibungen, ähnlich der Funktionsweise von Anmerkungen. Zusätzlich ermöglicht es die Neupositionierung der Marker.

Um ein kommentiertes Bild in einem PDF zu haben, war es notwendig, sowohl das Bild als auch die Anmerkungsmarkierungen einzuschließen. Während das Hinzufügen des Bildes selbst zum PDF eine einfache Aufgabe war, entstand die Herausforderung beim Versuch, auch die Anmerkungsmarkierungen einzubeziehen. Leider fehlte dem benutzerdefinierten Widget die Möglichkeit, sowohl das Bild als auch die Anmerkungen zusammen zu speichern.

Lösung

Um das vorliegende Problem zu lösen, begann ich, verschiedene Alternativen zu untersuchen, und stieß glücklicherweise auf die Funktion „Capture node screenshot“ in den Entwicklertools. Dieses Tool erfasst das Knotenelement bequem als Bild und erfüllt genau meine Anforderungen.

Nach weiteren Recherchen entdeckte ich, dass es zwei JavaScript-Bibliotheken gibt, die für diese Aufgabe verwendet werden können: html2canvas und dom-to-image . Da sich html2canvas noch in der Entwicklung befindet, habe ich mich entschieden, dem Rat eines Kollegen zu folgen und Dom-to-Image zu implementieren.

Implementierung

Ich habe eine benutzerdefinierte JavaScript-Funktion entwickelt, die den Klassennamen des Knotens und ein Bild als Eingaben empfängt und einen Screenshot des angegebenen Knotens erfasst, der dann im Eingabebild gespeichert wird.

• Erstellen Sie eine JS-Aktion
• Fügen Sie zwei Parameter hinzu; Klassenname (Zeichenfolge), Bild (Bild)
• Fügen Sie den folgenden Code ein.

export async function JS_DomToBlob(className, image) {
 // BEGIN USER CODE
 let node = document.getElementsByClassName(className)[0];
  return new Promise(async(resolve, reject)=> {
    try {
      domtoimage.toBlob(node)
      .then(function (blob) {
      mx.data.saveDocument(image.getGuid(), "image.png", {}, blob, 
() => resolve(true), reject);
    })
    .catch(function(error) {
      reject(new Error(error));
    });
    }catch (error) {
      reject(new Error(error));
    }
  });
 // END USER CODE
}

npm install dom-to-image
npm i - save-dev @types/dom-to-image