feedback-vos 1.0.39 → 1.0.40

package/dist/index.mjs

@@ -381,24 +381,52 @@ function ScreenshotButton({
   const themeClasses = getThemeClasses(theme);
   async function handleTakeScreenshot() {
     setIsTakenScreenShot(true);
-    const canvas = await html2canvas(document.body, {
+    const canvas = await html2canvas(document.documentElement, {
       width: window.innerWidth,
       height: window.innerHeight,
-      scrollX: -window.scrollX,
-      scrollY: -window.scrollY,
+      x: 0,
+      y: 0,
       windowWidth: window.innerWidth,
       windowHeight: window.innerHeight,
-      scale: window.devicePixelRatio || 1,
-      // Use device pixel ratio for better quality
+      scale: 1,
+      // Use scale 1 for consistent sizing
       useCORS: true,
-      // Enable CORS for better image rendering
       logging: false,
-      // Disable logging for cleaner output
       ignoreElements: (element) => {
         return element.hasAttribute("data-feedback-widget") || element.closest("[data-feedback-widget]") !== null;
       }
     });
-    const base64image = canvas.toDataURL("image/png", 1);
+    const targetWidth = 1920;
+    const targetHeight = 1080;
+    const normalizedCanvas = document.createElement("canvas");
+    normalizedCanvas.width = targetWidth;
+    normalizedCanvas.height = targetHeight;
+    const ctx = normalizedCanvas.getContext("2d");
+    if (!ctx) {
+      setIsTakenScreenShot(false);
+      return;
+    }
+    ctx.imageSmoothingEnabled = true;
+    ctx.imageSmoothingQuality = "high";
+    const sourceAspect = canvas.width / canvas.height;
+    const targetAspect = targetWidth / targetHeight;
+    let drawWidth = targetWidth;
+    let drawHeight = targetHeight;
+    let drawX = 0;
+    let drawY = 0;
+    if (sourceAspect > targetAspect) {
+      drawHeight = targetHeight;
+      drawWidth = drawHeight * sourceAspect;
+      drawX = (targetWidth - drawWidth) / 2;
+    } else {
+      drawWidth = targetWidth;
+      drawHeight = drawWidth / sourceAspect;
+      drawY = (targetHeight - drawHeight) / 2;
+    }
+    ctx.fillStyle = "#ffffff";
+    ctx.fillRect(0, 0, targetWidth, targetHeight);
+    ctx.drawImage(canvas, drawX, drawY, drawWidth, drawHeight);
+    const base64image = normalizedCanvas.toDataURL("image/png", 1);
     onScreenshotTook(base64image);
     setIsTakenScreenShot(false);
   }
@@ -748,7 +776,7 @@ async function uploadFileToRepo(token, owner, repo, file, folderPath, defaultBra
   return rawUrl;
 }
 async function uploadScreenshotToRepo(token, owner, repo, screenshot, screenshotPath) {
-  const compressedScreenshot = await compressScreenshot(screenshot, 2560, 0.9);
+  const compressedScreenshot = await compressScreenshot(screenshot, 1920, 0.85);
   const base64Content = compressedScreenshot.includes(",") ? compressedScreenshot.split(",")[1] : compressedScreenshot;
   const repoResponse = await fetch(
     `https://api.github.com/repos/${owner}/${repo}`,
@@ -850,7 +878,7 @@ async function uploadScreenshotToRepo(token, owner, repo, screenshot, screenshot
   console.log(`Screenshot uploaded successfully to: ${rawUrl}`);
   return rawUrl;
 }
-function compressScreenshot(dataUrl, maxWidth = 2560, quality = 0.9) {
+function compressScreenshot(dataUrl, maxWidth = 1920, quality = 0.85) {
   return new Promise((resolve, reject) => {
     if (typeof window === "undefined" || typeof document === "undefined") {
       reject(new Error("Screenshot compression only works in browser environments"));
@@ -865,9 +893,8 @@ function compressScreenshot(dataUrl, maxWidth = 2560, quality = 0.9) {
         height = height * maxWidth / width;
         width = maxWidth;
       }
-      const dpr = window.devicePixelRatio || 1;
-      canvas.width = width * dpr;
-      canvas.height = height * dpr;
+      canvas.width = width;
+      canvas.height = height;
       const ctx = canvas.getContext("2d");
       if (!ctx) {
         reject(new Error("Could not get canvas context"));
@@ -875,7 +902,6 @@ function compressScreenshot(dataUrl, maxWidth = 2560, quality = 0.9) {
       }
       ctx.imageSmoothingEnabled = true;
       ctx.imageSmoothingQuality = "high";
-      ctx.scale(dpr, dpr);
       ctx.drawImage(img, 0, 0, width, height);
       const compressedDataUrl = canvas.toDataURL("image/jpeg", quality);
       resolve(compressedDataUrl);