screen shot test

2025-07-16 12:24:51 +03:30
parent 9cdd5de94c
commit fe5b7de9b1
8 changed files with 309 additions and 47 deletions
@@ -0,0 +1,174 @@
+import domtoimage from "dom-to-image";
+
+/**
+ * گرفتن اسکرین‌شات با dom-to-image و برگرداندن فایل برای آپلود
+ */
+export const captureScreenshotAsFile = async (
+  templateName: string
+): Promise<File | null> => {
+  try {
+    console.log("📸 Starting screenshot capture for upload...");
+
+    const element = await findAndValidateElement();
+    if (!element) {
+      console.error("❌ Element not found");
+      return null;
+    }
+
+    // آماده‌سازی element
+    const htmlElement = element as HTMLElement;
+    const originalTransform = htmlElement.style.transform;
+    const originalPosition = htmlElement.style.position;
+
+    htmlElement.style.transform = "scale(1)";
+    htmlElement.style.position = "relative";
+
+    // صبر برای render کامل
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+
+    const options = {
+      quality: 1,
+      bgcolor: "#ffffff",
+      width: element.offsetWidth,
+      height: element.offsetHeight,
+      style: {
+        transform: "scale(1)",
+        transformOrigin: "top left",
+      },
+    };
+
+    const dataUrl = await domtoimage.toPng(element, options);
+
+    // بازگردانی استایل‌های اصلی
+    htmlElement.style.transform = originalTransform;
+    htmlElement.style.position = originalPosition;
+
+    // تبدیل dataURL به File
+    const response = await fetch(dataUrl);
+    const blob = await response.blob();
+    const file = new File([blob], `${templateName}-template.png`, {
+      type: "image/png",
+    });
+
+    console.log("✅ Screenshot file created successfully:", file);
+    return file;
+  } catch (error) {
+    console.error("❌ Screenshot capture failed:", error);
+    return null;
+  }
+};
+
+/**
+ * تابع اصلی - استفاده از dom-to-image و برگرداندن فایل
+ */
+export const capturePersonalityScreenshot = async (
+  templateName: string
+): Promise<File | null> => {
+  console.log("🎯 Starting screenshot capture...");
+
+  try {
+    const screenshotFile = await captureScreenshotAsFile(templateName);
+    if (screenshotFile) {
+      console.log("✅ Screenshot captured successfully");
+      return screenshotFile;
+    } else {
+      console.error("❌ Screenshot capture failed");
+      return null;
+    }
+  } catch (error) {
+    console.error("❌ Screenshot error:", error);
+    return null;
+  }
+};
+
+/**
+ * پیدا کردن و بررسی element
+ */
+const findAndValidateElement = async (): Promise<HTMLElement | null> => {
+  console.log("🔍 Looking for personality element...");
+
+  const selectors = [
+    ".personality-template",
+    '[class*="personality-template"]',
+    ".flex-1.bg-white.rounded-4xl.p-8",
+    ".bg-white.rounded-4xl.p-8",
+    'div[class*="bg-white"][class*="rounded-4xl"]',
+  ];
+
+  for (let i = 0; i < selectors.length; i++) {
+    const selector = selectors[i];
+    console.log(`🔍 Trying selector ${i + 1}/${selectors.length}: ${selector}`);
+
+    const elements = document.querySelectorAll(selector);
+    console.log(`   Found ${elements.length} elements`);
+
+    for (let j = 0; j < elements.length; j++) {
+      const element = elements[j] as HTMLElement;
+
+      const rect = element.getBoundingClientRect();
+      const isVisible = rect.width > 0 && rect.height > 0;
+      const hasContent = element.innerHTML.trim().length > 0;
+
+      console.log(`   Element ${j + 1}:`, {
+        visible: isVisible,
+        hasContent,
+        dimensions: `${rect.width}x${rect.height}`,
+        className: element.className.slice(0, 50) + "...",
+      });
+
+      if (isVisible && hasContent) {
+        console.log(`✅ Found valid element with selector: ${selector}`);
+        return element;
+      }
+    }
+  }
+
+  console.log("❌ No valid elements found");
+  return null;
+};
+
+/**
+ * تابع debug برای بررسی element
+ */
+export const debugPersonalityElement = () => {
+  console.log("🔍 === DEBUG: Personality Element Detection ===");
+
+  const selectors = [
+    ".personality-template",
+    '[class*="personality-template"]',
+    ".flex-1.bg-white.rounded-4xl.p-8",
+    ".bg-white.rounded-4xl",
+    "table",
+  ];
+
+  let foundElements = 0;
+
+  selectors.forEach((selector, index) => {
+    const elements = document.querySelectorAll(selector);
+    console.log(`${index + 1}. "${selector}": ${elements.length} elements`);
+
+    elements.forEach((el, elIndex) => {
+      const htmlEl = el as HTMLElement;
+      const rect = htmlEl.getBoundingClientRect();
+
+      console.log(`   [${elIndex + 1}]`, {
+        visible: rect.width > 0 && rect.height > 0,
+        size: `${rect.width}x${rect.height}`,
+        hasContent: htmlEl.innerHTML.trim().length > 0,
+        className: htmlEl.className.slice(0, 40) + "...",
+      });
+
+      if (rect.width > 0 && rect.height > 0) {
+        foundElements++;
+      }
+    });
+  });
+
+  console.log(`📊 Summary: ${foundElements} visible elements found`);
+  console.log("=========================================");
+
+  return {
+    found: foundElements > 0,
+    totalElements: foundElements,
+  };
+};