releasebird-javascript-sdk 1.0.43 → 1.0.45

package/src/RbirdScreenshotManager.js

@@ -1,5 +1,5 @@
 import SVGEditor from "./SVGEditor";
-import html2canvas from "html2canvas";
+import * as htmlToImage from 'html-to-image';
 
 export default class RbirdScreenshotManager {
 
@@ -92,34 +92,56 @@ export default class RbirdScreenshotManager {
 
         // Wait a moment for the loader to render, then hide our UI elements and take the screenshot
         setTimeout(() => {
-            // Store original visibility states
-            const originalLoaderVisibility = loader.style.visibility;
-            const originalBoundaryVisibility = that.boundary ? that.boundary.style.visibility : null;
-
-            // Hide only the close button, but keep the boundary (with drawings) visible
+            // Hide the close button and toolbar
             const closeButton = document.getElementById('screenshotCloseButton');
+            const toolbar = document.querySelector('.menu'); // SVGEditor toolbar
+
             const originalCloseButtonVisibility = closeButton ? closeButton.style.visibility : null;
+            const originalToolbarVisibility = toolbar ? toolbar.style.visibility : null;
 
             // Hide elements using visibility instead of display to maintain layout
             loader.style.visibility = 'hidden';
             if (closeButton) {
                 closeButton.style.visibility = 'hidden';
             }
+            if (toolbar) {
+                toolbar.style.visibility = 'hidden';
+            }
 
             // Use requestAnimationFrame to ensure the changes are applied before screenshot
             requestAnimationFrame(() => {
-                html2canvas(document.body, {
-                    allowTaint: true,
-                    useCORS: true,
-                    logging: false,
-                    scale: 1,
-                    backgroundColor: null
-                }).then(function (canvas) {
+                // Use html-to-image's toJpeg method with higher resolution
+                // Capture only the visible viewport
+                htmlToImage.toJpeg(document.body, {
+                    quality: 0.95,
+                    pixelRatio: 2, // Higher resolution (2x)
+                    cacheBust: true,
+                    width: window.innerWidth,
+                    height: window.innerHeight,
+                    style: {
+                        margin: '0',
+                        padding: '0'
+                    },
+                    filter: (node) => {
+                        // Filter out the loader and toolbar elements
+                        if (node.id === 'rbirdScreenshotLoader') {
+                            return false;
+                        }
+                        // Also filter by class
+                        if (node.classList && node.classList.contains('menu')) {
+                            return false;
+                        }
+                        return true;
+                    }
+                }).then(function (dataUrl) {
                     // Restore visibility
-                    loader.style.visibility = originalLoaderVisibility;
+                    loader.style.visibility = 'visible';
                     if (closeButton) {
                         closeButton.style.visibility = originalCloseButtonVisibility;
                     }
+                    if (toolbar) {
+                        toolbar.style.visibility = originalToolbarVisibility;
+                    }
 
                     that.hideLoader();
 
@@ -127,19 +149,21 @@ export default class RbirdScreenshotManager {
                     if (widgetInstance.iframe) {
                         widgetInstance.iframe.contentWindow?.postMessage({
                             type: 'screenshot',
-                            screenshot: canvas.toDataURL("image/jpeg")
+                            screenshot: dataUrl
                         }, '*');
                     }
 
                     that.deactivateMarker();
 
-                    //document.body.appendChild(canvas);
                 }).catch((e) => {
                     // Restore visibility on error
-                    loader.style.visibility = originalLoaderVisibility;
+                    loader.style.visibility = 'visible';
                     if (closeButton) {
                         closeButton.style.visibility = originalCloseButtonVisibility;
                     }
+                    if (toolbar) {
+                        toolbar.style.visibility = originalToolbarVisibility;
+                    }
                     that.hideLoader();
                     console.error('Screenshot error:', e);
                 });