react-request-trail 1.0.0 → 1.1.0

package/dist/index.d.cts

@@ -197,19 +197,29 @@ declare function blobToBase64(blob: Blob): Promise<string>;
 
 /**
  * Hata aninda sayfanin ekran goruntusunu alir.
- * html2canvas kullanarak DOM'u canvas'a render eder, ardindan base64 data URL'e donusturur.
  *
- * @param targetElement - Goruntu alinacak element (default: document.body)
- * @param options - Ek ayarlar
- * @returns Base64 data URL (image/png) veya null (basarisiz olursa)
+ * v1.1: html2canvas yerine `modern-screenshot` kullanilir.
+ * - html2canvas her DOM node'unu recursive walk edip canvas'a yeniden cizer.
+ *   Buyuk/karmasik sayfalar icin 30-60 saniye surebiliyordu.
+ * - modern-screenshot SVG `<foreignObject>` + native `Image()` API kullanir,
+ *   tarayicinin kendi rasterleyicisinden faydalanir. Tipik bir sayfa icin
+ *   500ms - 2 saniye arasi.
+ *
+ * API ayni: `(targetElement?, options?) => Promise<string | null>` doner.
  */
 declare function captureScreenshot(targetElement?: HTMLElement, options?: {
-    /** Kalite (0-1 arasi, default: 0.8) */
+    /** Kalite (0-1 arasi, default: 0.92 — JPEG icin) */
     quality?: number;
     /** Maksimum genislik (px, default: 1400) */
     maxWidth?: number;
     /** Timeout (ms, default: 5000) */
     timeout?: number;
+    /** Format. PNG buyuk, JPEG kucuk. Default: 'jpeg' */
+    format?: 'png' | 'jpeg';
+    /** DPI carpani. 1 (kucuk), 2 (retina, default), 3 (cok yuksek) */
+    scale?: number;
+    /** 10MB ustu cikti varsa otomatik JPEG'e dusur (default: true) */
+    autoCompress?: boolean;
 }): Promise<string | null>;
 
 declare const helpers: {

package/dist/index.d.ts

@@ -197,19 +197,29 @@ declare function blobToBase64(blob: Blob): Promise<string>;
 
 /**
  * Hata aninda sayfanin ekran goruntusunu alir.
- * html2canvas kullanarak DOM'u canvas'a render eder, ardindan base64 data URL'e donusturur.
  *
- * @param targetElement - Goruntu alinacak element (default: document.body)
- * @param options - Ek ayarlar
- * @returns Base64 data URL (image/png) veya null (basarisiz olursa)
+ * v1.1: html2canvas yerine `modern-screenshot` kullanilir.
+ * - html2canvas her DOM node'unu recursive walk edip canvas'a yeniden cizer.
+ *   Buyuk/karmasik sayfalar icin 30-60 saniye surebiliyordu.
+ * - modern-screenshot SVG `<foreignObject>` + native `Image()` API kullanir,
+ *   tarayicinin kendi rasterleyicisinden faydalanir. Tipik bir sayfa icin
+ *   500ms - 2 saniye arasi.
+ *
+ * API ayni: `(targetElement?, options?) => Promise<string | null>` doner.
  */
 declare function captureScreenshot(targetElement?: HTMLElement, options?: {
-    /** Kalite (0-1 arasi, default: 0.8) */
+    /** Kalite (0-1 arasi, default: 0.92 — JPEG icin) */
     quality?: number;
     /** Maksimum genislik (px, default: 1400) */
     maxWidth?: number;
     /** Timeout (ms, default: 5000) */
     timeout?: number;
+    /** Format. PNG buyuk, JPEG kucuk. Default: 'jpeg' */
+    format?: 'png' | 'jpeg';
+    /** DPI carpani. 1 (kucuk), 2 (retina, default), 3 (cok yuksek) */
+    scale?: number;
+    /** 10MB ustu cikti varsa otomatik JPEG'e dusur (default: true) */
+    autoCompress?: boolean;
 }): Promise<string | null>;
 
 declare const helpers: {

package/dist/index.js

@@ -1,6 +1,6 @@
 import { createContext, Component, useRef, useState, useEffect, useCallback, useMemo, useContext } from 'react';
 import { jsPDF } from 'jspdf';
-import html2canvas from 'html2canvas';
+import { domToCanvas, domToDataUrl } from 'modern-screenshot';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 // src/components/TrailProvider.tsx
@@ -1053,38 +1053,48 @@ async function captureScreenshot(targetElement, options) {
       return null;
     }
     const element = targetElement || document.body;
-    const quality = options?.quality ?? 0.8;
+    const quality = options?.quality ?? 0.92;
     const maxWidth = options?.maxWidth ?? 1400;
     const timeout = options?.timeout ?? 5e3;
-    const canvas = await Promise.race([
-      html2canvas(element, {
-        useCORS: true,
-        // Cross-origin resimleri dahil et
-        allowTaint: false,
-        // Tainted canvas'ı engelle
+    const format = options?.format ?? "jpeg";
+    const scale = options?.scale ?? Math.min(window.devicePixelRatio || 1, 2);
+    const autoCompress = options?.autoCompress !== false;
+    const elementWidth = element.scrollWidth;
+    let effectiveScale = scale;
+    if (elementWidth * scale > maxWidth * 2) {
+      effectiveScale = maxWidth * 2 / elementWidth;
+    }
+    const capturePromise = (async () => {
+      if (autoCompress || format === "jpeg") {
+        const canvas = await domToCanvas(element, {
+          scale: effectiveScale,
+          backgroundColor: "#ffffff",
+          fetch: { requestInit: { credentials: "omit" } }
+        });
+        if (!canvas) return null;
+        const mime = format === "png" ? "image/png" : "image/jpeg";
+        let dataUrl2 = canvas.toDataURL(
+          mime,
+          format === "jpeg" ? quality : void 0
+        );
+        if (autoCompress && dataUrl2.length > 10 * 1024 * 1024) {
+          dataUrl2 = canvas.toDataURL("image/jpeg", 0.5);
+        }
+        return dataUrl2;
+      }
+      return await domToDataUrl(element, {
+        scale: effectiveScale,
         backgroundColor: "#ffffff",
-        // Arka plan rengi
-        scale: Math.min(window.devicePixelRatio || 1, 2),
-        // Max 2x çözünürlük
-        logging: false,
-        // Console log'ları kapat
-        imageTimeout: 3e3,
-        // Resim yükleme timeout'u
-        removeContainer: true,
-        // Geçici container'ı temizle
-        width: Math.min(element.scrollWidth, maxWidth),
-        windowWidth: Math.min(element.scrollWidth, maxWidth)
-      }),
+        fetch: { requestInit: { credentials: "omit" } }
+      });
+    })();
+    const dataUrl = await Promise.race([
+      capturePromise,
       new Promise(
         (_, reject) => setTimeout(() => reject(new Error("Screenshot timeout")), timeout)
       )
     ]);
-    if (!canvas) return null;
-    const dataUrl = canvas.toDataURL("image/png", quality);
-    if (dataUrl.length > 10 * 1024 * 1024) {
-      return canvas.toDataURL("image/jpeg", 0.5);
-    }
-    return dataUrl;
+    return dataUrl ?? null;
   } catch (error) {
     console.warn("[react-request-trail] Screenshot yakalama basarisiz:", error);
     return null;