npm - releasebird-javascript-sdk - Versions diffs - 1.0.61 → 1.0.62 - Mend

releasebird-javascript-sdk 1.0.61 → 1.0.62

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

package/.claude/settings.local.json +3 -1
package/backend-image-service/image-service/Dockerfile +8 -0
package/backend-image-service/image-service/fonts.conf +39 -0
package/backend-image-service/image-service/server.js +27 -8
package/backend-image-service/test-emoji-detailed.js +119 -0
package/backend-image-service/test-emoji-simple.js +68 -0
package/backend-image-service/test-emoji.html +51 -0
package/build/index.js +1 -1
package/emoji-test.png +0 -0
package/package.json +1 -1
package/published/1.0.62/index.js +1 -0
package/published/latest/index.js +1 -1
package/src/RbirdScreenshotManager.js +142 -21

package/src/RbirdScreenshotManager.js CHANGED Viewed

@@ -185,31 +185,25 @@ export default class RbirdScreenshotManager {
      * Returns complete HTML document with minimal modifications
      */
     async exportHTML() {
-        console.log('[Screenshot] Exporting HTML for server-side rendering...');
+        console.log('[Screenshot] Exporting HTML with inline resources...');
-        // Get the complete HTML using native serialization
-        const headHTML = document.head.outerHTML;
-        let bodyHTML = document.body.innerHTML;
-        // IMPORTANT: Keep the markerBoundary SVG content!
-        // The SVG drawings are already in the body innerHTML
-        // Create a temporary container to manipulate the body HTML
-        const tempContainer = document.createElement('div');
-        tempContainer.innerHTML = bodyHTML;
+        // Clone the document
+        const clone = document.documentElement.cloneNode(true);
         // Remove UI elements that shouldn't be in the screenshot
         const removeSelectors = [
             '#rbirdScreenshotLoader',
             '#screenshotCloseButton',
             '.menu',
+            'script',
+            'noscript',
             'iframe[src*="cookiehub"]',
             'iframe[src*="google"]',
             'iframe[src*="facebook"]'
         ];
         removeSelectors.forEach(selector => {
-            const elements = tempContainer.querySelectorAll(selector);
+            const elements = clone.querySelectorAll(selector);
             elements.forEach(el => {
                 if (el && el.parentNode) {
                     el.parentNode.removeChild(el);
@@ -217,22 +211,149 @@ export default class RbirdScreenshotManager {
             });
         });
-        // Get the cleaned body HTML
-        const cleanedBodyHTML = tempContainer.innerHTML;
+        // Download all images and convert to base64
+        await this.downloadAllImages(clone);
+        // Download all CSS and convert url() references to data URLs
+        await this.downloadAllCSS(clone);
         // Build complete HTML
-        const html = `<!DOCTYPE html>
-<html>
-${headHTML}
-<body>
-${cleanedBodyHTML}
-</body>
-</html>`;
+        const doctype = '<!DOCTYPE html>';
+        const html = doctype + clone.outerHTML;
         console.log(`[Screenshot] Exported HTML: ${html.length} bytes`);
         return html;
     }
+    /**
+     * Download all images and convert to base64 data URLs
+     */
+    async downloadAllImages(clone) {
+        const images = clone.querySelectorAll('img');
+        const promises = [];
+        for (let i = 0; i < images.length; i++) {
+            const img = images[i];
+            if (img.src && !img.src.startsWith('data:')) {
+                promises.push(
+                    this.fetchImageAsDataURL(img.src)
+                        .then(dataURL => {
+                            if (dataURL) {
+                                img.src = dataURL;
+                            }
+                        })
+                        .catch(err => {
+                            console.warn('[Screenshot] Failed to load image:', img.src, err);
+                        })
+                );
+            }
+        }
+        await Promise.all(promises);
+    }
+    /**
+     * Fetch image and convert to data URL
+     */
+    fetchImageAsDataURL(url) {
+        return new Promise((resolve, reject) => {
+            const xhr = new XMLHttpRequest();
+            xhr.onload = function() {
+                const reader = new FileReader();
+                reader.onloadend = function() {
+                    resolve(reader.result);
+                };
+                reader.onerror = function() {
+                    reject(new Error('Failed to read image'));
+                };
+                reader.readAsDataURL(xhr.response);
+            };
+            xhr.onerror = function() {
+                reject(new Error('Failed to fetch image'));
+            };
+            xhr.open('GET', url);
+            xhr.responseType = 'blob';
+            xhr.send();
+        });
+    }
+    /**
+     * Download all CSS and inline with data URLs
+     */
+    async downloadAllCSS(clone) {
+        const promises = [];
+        // Process all stylesheets
+        for (let i = 0; i < document.styleSheets.length; i++) {
+            const styleSheet = document.styleSheets[i];
+            try {
+                let cssText = '';
+                // Get CSS rules
+                if (styleSheet.cssRules) {
+                    for (let j = 0; j < styleSheet.cssRules.length; j++) {
+                        cssText += styleSheet.cssRules[j].cssText;
+                    }
+                }
+                if (cssText) {
+                    // Convert url() references to data URLs
+                    const basePath = styleSheet.href ? styleSheet.href.substring(0, styleSheet.href.lastIndexOf('/')) : window.location.href.substring(0, window.location.href.lastIndexOf('/'));
+                    const processedCSS = await this.loadCSSUrlResources(cssText, basePath);
+                    // Create inline style tag
+                    const head = clone.querySelector('head');
+                    const styleNode = document.createElement('style');
+                    styleNode.type = 'text/css';
+                    styleNode.appendChild(document.createTextNode(processedCSS));
+                    head.appendChild(styleNode);
+                }
+            } catch (err) {
+                console.warn('[Screenshot] Failed to process stylesheet:', err);
+            }
+        }
+        // Remove original link tags
+        const links = clone.querySelectorAll('link[rel="stylesheet"]');
+        links.forEach(link => link.remove());
+    }
+    /**
+     * Convert CSS url() references to data URLs
+     */
+    async loadCSSUrlResources(cssText, basePath) {
+        const urlRegex = /url\(['"]?([^'"()]+)['"]?\)/g;
+        const matches = [];
+        let match;
+        while ((match = urlRegex.exec(cssText)) !== null) {
+            matches.push(match);
+        }
+        for (const match of matches) {
+            const url = match[1];
+            // Skip if already a data URL or absolute URL
+            if (url.startsWith('data:') || url.startsWith('http')) {
+                continue;
+            }
+            try {
+                const fullURL = new URL(url, basePath + '/').href;
+                const dataURL = await this.fetchImageAsDataURL(fullURL);
+                if (dataURL) {
+                    cssText = cssText.replace(match[0], `url(${dataURL})`);
+                }
+            } catch (err) {
+                console.warn('[Screenshot] Failed to convert CSS url:', url, err);
+            }
+        }
+        return cssText;
+    }
     /**
      * Compress string using gzip