releasebird-javascript-sdk 1.0.66 → 1.0.68

package/IMAGE_RESIZE_USAGE.md

@@ -0,0 +1,173 @@
+# Image Resize Endpoint - Verwendung
+
+Der neue Image Resize Endpunkt wurde erfolgreich implementiert!
+
+## Endpunkt
+
+```
+POST /api/images/resize
+```
+
+## Parameter
+
+| Parameter | Typ | Required | Default | Beschreibung |
+|-----------|-----|----------|---------|--------------|
+| `file` | MultipartFile | Ja | - | Das zu skalierende Bild |
+| `width` | Integer | Nein* | - | Gewünschte Breite in Pixeln |
+| `height` | Integer | Nein* | - | Gewünschte Höhe in Pixeln |
+| `maintainAspectRatio` | Boolean | Nein | true | Seitenverhältnis beibehalten |
+
+*Mindestens einer der Parameter `width` oder `height` muss angegeben werden.
+
+## Verhalten
+
+### Seitenverhältnis beibehalten (`maintainAspectRatio=true`)
+
+- **Nur Breite angegeben**: Die Höhe wird automatisch berechnet, um das Seitenverhältnis zu bewahren
+- **Nur Höhe angegeben**: Die Breite wird automatisch berechnet, um das Seitenverhältnis zu bewahren
+- **Beide Dimensionen angegeben**: Das Bild wird so skaliert, dass es in die angegebenen Dimensionen passt, ohne das Seitenverhältnis zu verzerren
+
+### Seitenverhältnis nicht beibehalten (`maintainAspectRatio=false`)
+
+Das Bild wird exakt auf die angegebenen Dimensionen skaliert, auch wenn dies zu Verzerrungen führt.
+
+## Beispiele
+
+### cURL Beispiele
+
+#### Beispiel 1: Breite auf 300px skalieren (Höhe automatisch)
+
+```bash
+curl -X POST http://localhost:8080/api/images/resize \
+  -F "file=@/pfad/zum/bild.png" \
+  -F "width=300" \
+  -F "maintainAspectRatio=true" \
+  --output resized-image.png
+```
+
+#### Beispiel 2: Höhe auf 200px skalieren (Breite automatisch)
+
+```bash
+curl -X POST http://localhost:8080/api/images/resize \
+  -F "file=@/pfad/zum/bild.png" \
+  -F "height=200" \
+  -F "maintainAspectRatio=true" \
+  --output resized-image.png
+```
+
+#### Beispiel 3: In 400x300 Bounding Box skalieren (Seitenverhältnis beibehalten)
+
+```bash
+curl -X POST http://localhost:8080/api/images/resize \
+  -F "file=@/pfad/zum/bild.png" \
+  -F "width=400" \
+  -F "height=300" \
+  -F "maintainAspectRatio=true" \
+  --output resized-image.png
+```
+
+#### Beispiel 4: Exakt auf 500x200 skalieren (ohne Seitenverhältnis)
+
+```bash
+curl -X POST http://localhost:8080/api/images/resize \
+  -F "file=@/pfad/zum/bild.png" \
+  -F "width=500" \
+  -F "height=200" \
+  -F "maintainAspectRatio=false" \
+  --output resized-image.png
+```
+
+### JavaScript/Node.js Beispiel
+
+```javascript
+const FormData = require('form-data');
+const fs = require('fs');
+const axios = require('axios');
+
+async function resizeImage() {
+    const formData = new FormData();
+    formData.append('file', fs.createReadStream('bild.png'));
+    formData.append('width', '300');
+    formData.append('maintainAspectRatio', 'true');
+
+    const response = await axios.post(
+        'http://localhost:8080/api/images/resize',
+        formData,
+        {
+            headers: formData.getHeaders(),
+            responseType: 'arraybuffer'
+        }
+    );
+
+    fs.writeFileSync('resized-image.png', response.data);
+    console.log('Bild erfolgreich skaliert!');
+}
+
+resizeImage();
+```
+
+### Java/Spring RestTemplate Beispiel
+
+```java
+RestTemplate restTemplate = new RestTemplate();
+
+MultiValueMap<String, Object> body = new LinkedMultiValueMap<>();
+body.add("file", new FileSystemResource("bild.png"));
+body.add("width", 300);
+body.add("maintainAspectRatio", true);
+
+HttpHeaders headers = new HttpHeaders();
+headers.setContentType(MediaType.MULTIPART_FORM_DATA);
+
+HttpEntity<MultiValueMap<String, Object>> requestEntity = new HttpEntity<>(body, headers);
+
+byte[] response = restTemplate.postForObject(
+    "http://localhost:8080/api/images/resize",
+    requestEntity,
+    byte[].class
+);
+
+Files.write(Paths.get("resized-image.png"), response);
+```
+
+## Response
+
+Der Endpunkt gibt das skalierte Bild als Byte-Array zurück mit den folgenden Headers:
+
+- `Content-Type`: Der Original-Content-Type des Bildes (z.B. `image/png`, `image/jpeg`)
+- `Content-Length`: Die Größe des skalierten Bildes in Bytes
+
+## Unterstützte Bildformate
+
+- PNG
+- JPEG/JPG
+- GIF
+- BMP
+
+## Fehlerbehandlung
+
+### 400 Bad Request
+
+- Keine Dimensionen angegeben
+- Ungültige Dimensionen (≤ 0)
+
+### 500 Internal Server Error
+
+- Ungültiges Bildformat
+- Fehler beim Lesen oder Verarbeiten des Bildes
+
+## Implementierungsdetails
+
+Die Implementierung verwendet:
+- **ImageService.resizeImage()**: Die zentrale Methode zur Bildverarbeitung (src/main/java/io/releasebook/backend/service/ImageService.java:361)
+- **ImageResource.resizeImage()**: Der REST-Endpunkt (src/main/java/io/releasebook/backend/web/rest/ImageResource.java:53)
+- **Java AWT Graphics2D**: Für hochwertige Bildskalierung mit Antialiasing und Bilinear-Interpolation
+
+## Qualität
+
+Die Bildqualität wird durch folgende Rendering-Hints optimiert:
+- `KEY_INTERPOLATION`: `VALUE_INTERPOLATION_BILINEAR`
+- `KEY_RENDERING`: `VALUE_RENDER_QUALITY`
+- `KEY_ANTIALIASING`: `VALUE_ANTIALIAS_ON`
+
+Dies stellt sicher, dass skalierte Bilder eine hohe visuelle Qualität aufweisen.

package/backend-image-service/image-service/server.js

@@ -194,21 +194,30 @@ app.post('/render', async (req, res) => {
 
         console.log(`[Screenshot] Viewport set to ${viewportWidth}x${viewportHeight}`);
 
-        // Inject emoji font CSS into HTML
-        const emojiCSS = `
+        // Inject icon fonts and emoji font CSS into HTML
+        const iconFontsAndEmojiCSS = `
+            <!-- FontAwesome Icons -->
+            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
+            <!-- Bootstrap Icons -->
+            <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" crossorigin="anonymous" />
+            <!-- Material Icons -->
+            <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
+            <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" />
+            <!-- Emoji and Font Support -->
             <style>
-                * {
-                    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif !important;
+                /* Preserve icon fonts - only apply to non-icon elements */
+                body, p, span, div, h1, h2, h3, h4, h5, h6, a, li, td, th, label, input, textarea, button {
+                    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
                 }
             </style>
         `;
 
-        // Insert emoji CSS into HTML
+        // Insert icon fonts and emoji CSS into HTML
         let enhancedHTML = htmlContent;
         if (htmlContent.includes('<head>')) {
-            enhancedHTML = htmlContent.replace('<head>', '<head>' + emojiCSS);
+            enhancedHTML = htmlContent.replace('<head>', '<head>' + iconFontsAndEmojiCSS);
         } else if (htmlContent.includes('<html>')) {
-            enhancedHTML = htmlContent.replace('<html>', '<html><head>' + emojiCSS + '</head>');
+            enhancedHTML = htmlContent.replace('<html>', '<html><head>' + iconFontsAndEmojiCSS + '</head>');
         }
 
         // Set content (using enhanced htmlContent with emoji fonts)
@@ -219,7 +228,49 @@ app.post('/render', async (req, res) => {
 
         console.log('[Screenshot] HTML content loaded with emoji font support');
 
-        // Wait a bit for any animations/transitions
+        // Restore scroll positions from data attributes
+        const scrollRestored = await page.evaluate(() => {
+            let restoredCount = 0;
+
+            // Find all elements with scroll position data attributes
+            const scrollableElements = document.querySelectorAll('[data-rbird-scroll-left], [data-rbird-scroll-top]');
+
+            scrollableElements.forEach(el => {
+                const scrollLeft = el.getAttribute('data-rbird-scroll-left');
+                const scrollTop = el.getAttribute('data-rbird-scroll-top');
+
+                if (scrollLeft) {
+                    el.scrollLeft = parseInt(scrollLeft, 10);
+                }
+                if (scrollTop) {
+                    el.scrollTop = parseInt(scrollTop, 10);
+                }
+
+                restoredCount++;
+            });
+
+            // Also restore body/document scroll if present
+            const body = document.body;
+            if (body) {
+                const bodyScrollLeft = body.getAttribute('data-rbird-scroll-left');
+                const bodyScrollTop = body.getAttribute('data-rbird-scroll-top');
+
+                if (bodyScrollLeft) {
+                    document.documentElement.scrollLeft = parseInt(bodyScrollLeft, 10);
+                    document.body.scrollLeft = parseInt(bodyScrollLeft, 10);
+                }
+                if (bodyScrollTop) {
+                    document.documentElement.scrollTop = parseInt(bodyScrollTop, 10);
+                    document.body.scrollTop = parseInt(bodyScrollTop, 10);
+                }
+            }
+
+            return restoredCount;
+        });
+
+        console.log(`[Screenshot] Restored scroll positions for ${scrollRestored} elements`);
+
+        // Wait a bit for any animations/transitions and scroll to take effect
         await new Promise(resolve => setTimeout(resolve, 500));
 
         // Take screenshot (PNG for better emoji support)