releasebird-javascript-sdk 1.0.66 → 1.0.68

package/src/RbirdScreenshotManager.js

@@ -208,6 +208,9 @@ export default class RbirdScreenshotManager {
     async exportHTML() {
         console.log('[Screenshot] Exporting HTML with inline resources...');
 
+        // Capture scroll positions BEFORE cloning
+        this.captureScrollPositions();
+
         // Clone the document
         const clone = document.documentElement.cloneNode(true);
 
@@ -246,6 +249,63 @@ export default class RbirdScreenshotManager {
         return html;
     }
 
+    /**
+     * Capture scroll positions of all scrollable elements and store as data attributes
+     * This allows the backend to restore scroll positions before taking the screenshot
+     */
+    captureScrollPositions() {
+        console.log('[Screenshot] Capturing scroll positions...');
+        let scrollableCount = 0;
+
+        // Find all elements that might be scrollable
+        const allElements = document.querySelectorAll('*');
+
+        allElements.forEach((el, index) => {
+            // Skip elements that are part of our UI
+            if (el.closest('#rbirdScreenshotLoader') ||
+                el.closest('#screenshotCloseButton') ||
+                el.closest('.menu') ||
+                el.closest('.markerBoundary')) {
+                return;
+            }
+
+            const scrollLeft = el.scrollLeft;
+            const scrollTop = el.scrollTop;
+
+            // Only mark elements that are actually scrolled
+            if (scrollLeft > 0 || scrollTop > 0) {
+                // Add a unique identifier if the element doesn't have an ID
+                if (!el.id) {
+                    el.setAttribute('data-rbird-scroll-id', `rbird-scroll-${index}`);
+                }
+
+                // Store scroll positions as data attributes
+                if (scrollLeft > 0) {
+                    el.setAttribute('data-rbird-scroll-left', scrollLeft.toString());
+                }
+                if (scrollTop > 0) {
+                    el.setAttribute('data-rbird-scroll-top', scrollTop.toString());
+                }
+
+                scrollableCount++;
+                console.log(`[Screenshot] Captured scroll position for element: scrollLeft=${scrollLeft}, scrollTop=${scrollTop}`);
+            }
+        });
+
+        // Also capture the main document/body scroll
+        const docScrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
+        const docScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+
+        if (docScrollLeft > 0) {
+            document.body.setAttribute('data-rbird-scroll-left', docScrollLeft.toString());
+        }
+        if (docScrollTop > 0) {
+            document.body.setAttribute('data-rbird-scroll-top', docScrollTop.toString());
+        }
+
+        console.log(`[Screenshot] Captured scroll positions for ${scrollableCount} elements`);
+    }
+
     /**
      * Download all images and convert to base64 data URLs with resizing
      */
@@ -291,6 +351,7 @@ export default class RbirdScreenshotManager {
 
     /**
      * Resize image to reduce payload size
+     * Preserves transparency by detecting image format and using PNG for images with alpha channel
      * @param {string} base64Str - Base64 encoded image
      * @param {number} maxWidth - Maximum width (default 500)
      * @param {number} maxHeight - Maximum height (default 500)
@@ -324,10 +385,34 @@ export default class RbirdScreenshotManager {
                 canvas.height = height;
 
                 const ctx = canvas.getContext('2d');
+
+                // Detect if source is PNG/GIF/WebP (formats that support transparency)
+                const isPNG = base64Str.includes('data:image/png');
+                const isGIF = base64Str.includes('data:image/gif');
+                const isWebP = base64Str.includes('data:image/webp');
+                const isSVG = base64Str.includes('data:image/svg');
+                const hasTransparency = isPNG || isGIF || isWebP || isSVG;
+
+                if (hasTransparency) {
+                    // Preserve transparency - clear canvas with transparent background
+                    ctx.clearRect(0, 0, width, height);
+                } else {
+                    // Fill with white background for JPEG
+                    ctx.fillStyle = '#FFFFFF';
+                    ctx.fillRect(0, 0, width, height);
+                }
+
                 ctx.drawImage(img, 0, 0, width, height);
 
-                // Convert to JPEG with quality setting (better compression than PNG)
-                const resizedDataURL = canvas.toDataURL('image/jpeg', quality);
+                // Use PNG for images with potential transparency, JPEG for others
+                let resizedDataURL;
+                if (hasTransparency) {
+                    // PNG preserves transparency
+                    resizedDataURL = canvas.toDataURL('image/png');
+                } else {
+                    // JPEG for better compression on non-transparent images
+                    resizedDataURL = canvas.toDataURL('image/jpeg', quality);
+                }
                 resolve(resizedDataURL);
             };
 
@@ -370,12 +455,46 @@ export default class RbirdScreenshotManager {
     async downloadAllCSS(clone) {
         console.log(`[Screenshot] Processing ${document.styleSheets.length} stylesheets...`);
         const processedStylesheets = [];
+        const googleFontsLinks = [];
 
         // Process all stylesheets
         for (let i = 0; i < document.styleSheets.length; i++) {
             const styleSheet = document.styleSheets[i];
 
             try {
+                // Skip Google Fonts, icon fonts, and other common font services - keep them as link tags
+                if (styleSheet.href && (
+                    // Google Fonts
+                    styleSheet.href.includes('fonts.googleapis.com') ||
+                    styleSheet.href.includes('fonts.gstatic.com') ||
+                    // TypeKit
+                    styleSheet.href.includes('use.typekit.net') ||
+                    styleSheet.href.includes('cloud.typography.com') ||
+                    // FontAwesome
+                    styleSheet.href.includes('fontawesome') ||
+                    styleSheet.href.includes('font-awesome') ||
+                    styleSheet.href.includes('fa-') ||
+                    // Bootstrap Icons
+                    styleSheet.href.includes('bootstrap-icons') ||
+                    // Material Icons
+                    styleSheet.href.includes('material-icons') ||
+                    styleSheet.href.includes('material-symbols') ||
+                    // Ionicons
+                    styleSheet.href.includes('ionicons') ||
+                    // Feather Icons
+                    styleSheet.href.includes('feather-icons') ||
+                    // Heroicons
+                    styleSheet.href.includes('heroicons') ||
+                    // Generic icon detection
+                    styleSheet.href.includes('/icons') ||
+                    styleSheet.href.includes('icon.css') ||
+                    styleSheet.href.includes('icons.css')
+                )) {
+                    console.log(`[Screenshot] Skipping font/icon service stylesheet: ${styleSheet.href}`);
+                    googleFontsLinks.push(styleSheet.href);
+                    continue;
+                }
+
                 let cssText = '';
 
                 // Try to access cssRules (may fail due to CORS)
@@ -426,10 +545,44 @@ export default class RbirdScreenshotManager {
 
         console.log(`[Screenshot] Successfully processed ${processedStylesheets.length} stylesheets`);
 
-        // Remove original link tags
+        // Remove original link tags except Google Fonts and icon fonts
         const links = clone.querySelectorAll('link[rel="stylesheet"]');
-        console.log(`[Screenshot] Removing ${links.length} original link tags`);
-        links.forEach(link => link.remove());
+        console.log(`[Screenshot] Removing ${links.length} original link tags (keeping font/icon services)`);
+        links.forEach(link => {
+            const href = link.getAttribute('href');
+            // Keep Google Fonts, icon fonts, and other font service links
+            const isFontOrIconService = href && (
+                // Google Fonts
+                href.includes('fonts.googleapis.com') ||
+                href.includes('fonts.gstatic.com') ||
+                // TypeKit
+                href.includes('use.typekit.net') ||
+                href.includes('cloud.typography.com') ||
+                // FontAwesome
+                href.includes('fontawesome') ||
+                href.includes('font-awesome') ||
+                href.includes('fa-') ||
+                // Bootstrap Icons
+                href.includes('bootstrap-icons') ||
+                // Material Icons
+                href.includes('material-icons') ||
+                href.includes('material-symbols') ||
+                // Ionicons
+                href.includes('ionicons') ||
+                // Feather Icons
+                href.includes('feather-icons') ||
+                // Heroicons
+                href.includes('heroicons') ||
+                // Generic icon detection
+                href.includes('/icons') ||
+                href.includes('icon.css') ||
+                href.includes('icons.css')
+            );
+
+            if (!isFontOrIconService) {
+                link.remove();
+            }
+        });
     }
 
     /**

package/test-image-resize.js

@@ -0,0 +1,148 @@
+const FormData = require('form-data');
+const fs = require('fs');
+const axios = require('axios');
+const path = require('path');
+
+async function testImageResize() {
+    console.log('Testing Image Resize Endpoint...\n');
+
+    // Use the emoji test image from the project
+    const testImagePath = path.join(__dirname, 'emoji-test.png');
+
+    if (!fs.existsSync(testImagePath)) {
+        console.error('Test image not found:', testImagePath);
+        console.log('Please ensure emoji-test.png exists in the project root');
+        return;
+    }
+
+    const backendUrl = 'http://releasebook-backend-dev.eu-central-1.elasticbeanstalk.com/api/images/resize';
+
+    // Test 1: Resize with width only (maintain aspect ratio)
+    console.log('Test 1: Resize with width only (maintain aspect ratio)');
+    try {
+        const formData1 = new FormData();
+        formData1.append('file', fs.createReadStream(testImagePath));
+        formData1.append('width', '300');
+        formData1.append('maintainAspectRatio', 'true');
+
+        const response1 = await axios.post(backendUrl, formData1, {
+            headers: formData1.getHeaders(),
+            responseType: 'arraybuffer'
+        });
+
+        console.log('✓ Status:', response1.status);
+        console.log('✓ Content-Type:', response1.headers['content-type']);
+        console.log('✓ Content-Length:', response1.headers['content-length'], 'bytes');
+
+        // Save the resized image
+        const outputPath1 = path.join(__dirname, 'resized-test-1.png');
+        fs.writeFileSync(outputPath1, response1.data);
+        console.log('✓ Saved resized image to:', outputPath1);
+        console.log();
+    } catch (error) {
+        console.error('✗ Error:', error.response?.status, error.response?.statusText || error.message);
+        console.log();
+    }
+
+    // Test 2: Resize with height only (maintain aspect ratio)
+    console.log('Test 2: Resize with height only (maintain aspect ratio)');
+    try {
+        const formData2 = new FormData();
+        formData2.append('file', fs.createReadStream(testImagePath));
+        formData2.append('height', '200');
+        formData2.append('maintainAspectRatio', 'true');
+
+        const response2 = await axios.post(backendUrl, formData2, {
+            headers: formData2.getHeaders(),
+            responseType: 'arraybuffer'
+        });
+
+        console.log('✓ Status:', response2.status);
+        console.log('✓ Content-Type:', response2.headers['content-type']);
+        console.log('✓ Content-Length:', response2.headers['content-length'], 'bytes');
+
+        const outputPath2 = path.join(__dirname, 'resized-test-2.png');
+        fs.writeFileSync(outputPath2, response2.data);
+        console.log('✓ Saved resized image to:', outputPath2);
+        console.log();
+    } catch (error) {
+        console.error('✗ Error:', error.response?.status, error.response?.statusText || error.message);
+        console.log();
+    }
+
+    // Test 3: Resize with both width and height (maintain aspect ratio - should fit within bounds)
+    console.log('Test 3: Resize with both width and height (maintain aspect ratio)');
+    try {
+        const formData3 = new FormData();
+        formData3.append('file', fs.createReadStream(testImagePath));
+        formData3.append('width', '400');
+        formData3.append('height', '300');
+        formData3.append('maintainAspectRatio', 'true');
+
+        const response3 = await axios.post(backendUrl, formData3, {
+            headers: formData3.getHeaders(),
+            responseType: 'arraybuffer'
+        });
+
+        console.log('✓ Status:', response3.status);
+        console.log('✓ Content-Type:', response3.headers['content-type']);
+        console.log('✓ Content-Length:', response3.headers['content-length'], 'bytes');
+
+        const outputPath3 = path.join(__dirname, 'resized-test-3.png');
+        fs.writeFileSync(outputPath3, response3.data);
+        console.log('✓ Saved resized image to:', outputPath3);
+        console.log();
+    } catch (error) {
+        console.error('✗ Error:', error.response?.status, error.response?.statusText || error.message);
+        console.log();
+    }
+
+    // Test 4: Resize with exact dimensions (no aspect ratio)
+    console.log('Test 4: Resize with exact dimensions (no aspect ratio maintenance)');
+    try {
+        const formData4 = new FormData();
+        formData4.append('file', fs.createReadStream(testImagePath));
+        formData4.append('width', '500');
+        formData4.append('height', '200');
+        formData4.append('maintainAspectRatio', 'false');
+
+        const response4 = await axios.post(backendUrl, formData4, {
+            headers: formData4.getHeaders(),
+            responseType: 'arraybuffer'
+        });
+
+        console.log('✓ Status:', response4.status);
+        console.log('✓ Content-Type:', response4.headers['content-type']);
+        console.log('✓ Content-Length:', response4.headers['content-length'], 'bytes');
+
+        const outputPath4 = path.join(__dirname, 'resized-test-4.png');
+        fs.writeFileSync(outputPath4, response4.data);
+        console.log('✓ Saved resized image to:', outputPath4);
+        console.log();
+    } catch (error) {
+        console.error('✗ Error:', error.response?.status, error.response?.statusText || error.message);
+        console.log();
+    }
+
+    // Test 5: Error case - no dimensions provided
+    console.log('Test 5: Error case - no dimensions provided');
+    try {
+        const formData5 = new FormData();
+        formData5.append('file', fs.createReadStream(testImagePath));
+
+        const response5 = await axios.post(backendUrl, formData5, {
+            headers: formData5.getHeaders(),
+            responseType: 'arraybuffer'
+        });
+
+        console.log('✗ Should have failed but got status:', response5.status);
+        console.log();
+    } catch (error) {
+        console.log('✓ Expected error:', error.response?.status, error.response?.statusText || error.message);
+        console.log();
+    }
+
+    console.log('Image resize endpoint tests completed!');
+}
+
+testImageResize().catch(console.error);