Update script.js

script.js

@@ -1,3 +1,11 @@
+let selectedHashtag = "#StandWithPalestine"; // الهاشتاج الافتراضي
+
+function updateHashtag() {
+    selectedHashtag = document.getElementById('hashtag-select').value;
+    document.getElementById('hashtag1').textContent = selectedHashtag;
+    document.getElementById('hashtag2').textContent = selectedHashtag;
+}
+
 async function loadTwitterImage() {
     const username = document.getElementById('username-input').value.trim();
     if (!username) {
@@ -7,26 +15,26 @@ async function loadTwitterImage() {
 
     const loading = document.getElementById('loading');
     const successMessage = document.getElementById('success-message');
-    const exportBtn = document.getElementById('export-btn');
 
     loading.style.display = 'block';
     successMessage.style.display = 'none';
-    exportBtn.disabled = true;
 
     try {
-        const img = document.getElementById('profile-image');
+        const img1 = document.getElementById('profile-image1');
+        const img2 = document.getElementById('profile-image2');
         const imageUrl = `https://unavatar.io/x/${username}`;
-        img.crossOrigin = 'anonymous';
-        img.src = `${imageUrl}?t=${new Date().getTime()}`;
+        img1.crossOrigin = 'anonymous';
+        img2.crossOrigin = 'anonymous';
+        img1.src = `${imageUrl}?t=${new Date().getTime()}`;
+        img2.src = `${imageUrl}?t=${new Date().getTime()}`;
 
-        img.onload = () => {
+        img1.onload = img2.onload = () => {
             loading.style.display = 'none';
             successMessage.style.display = 'block';
-            exportBtn.disabled = false;
             console.log("تم تحميل الصورة بنجاح");
         };
 
-        img.onerror = () => {
+        img1.onerror = img2.onerror = () => {
             loading.style.display = 'none';
             alert("حدث خطأ أثناء تحميل الصورة.");
         };
@@ -47,25 +55,24 @@ function handleImageUpload(event) {
 
         const loading = document.getElementById('loading');
         const successMessage = document.getElementById('success-message');
-        const exportBtn = document.getElementById('export-btn');
 
         loading.style.display = 'block';
         successMessage.style.display = 'none';
-        exportBtn.disabled = true;
 
         const reader = new FileReader();
         reader.onload = function(e) {
-            const img = document.getElementById('profile-image');
-            img.src = e.target.result;
+            const img1 = document.getElementById('profile-image1');
+            const img2 = document.getElementById('profile-image2');
+            img1.src = e.target.result;
+            img2.src = e.target.result;
 
-            img.onload = () => {
+            img1.onload = img2.onload = () => {
                 loading.style.display = 'none';
                 successMessage.style.display = 'block';
-                exportBtn.disabled = false;
                 console.log("تم تحميل الصورة بنجاح");
             };
 
-            img.onerror = () => {
+            img1.onerror = img2.onerror = () => {
                 loading.style.display = 'none';
                 alert("حدث خطأ أثناء تحميل الصورة.");
             };
@@ -74,9 +81,9 @@ function handleImageUpload(event) {
     }
 }
 
-async function exportImage() {
-    const profileImg = document.getElementById('profile-image');
-    const overlayImg = document.getElementById('overlay-image');
+function downloadImage(type) {
+    const profileImg = document.getElementById(type === 'transparent' ? 'profile-image1' : 'profile-image2');
+    const overlayImg = document.getElementById(type === 'transparent' ? 'overlay-image1' : 'overlay-image2');
 
     if (!profileImg.src || profileImg.src === window.location.href) {
         alert("الرجاء تحميل صورة أولاً.");
@@ -84,62 +91,45 @@ async function exportImage() {
     }
 
     try {
-        // إنشاء نسخة من الصورة العلوية باستخدام `new Image()`
-        const overlay = new Image();
-        overlay.src = overlayImg.src;
-        overlay.crossOrigin = "anonymous";
-
-        // الانتظار حتى يتم تحميل الصور
-        await Promise.all([
-            new Promise((resolve, reject) => {
-                if (profileImg.complete) resolve();
-                else {
-                    profileImg.onload = resolve;
-                    profileImg.onerror = reject;
-                }
-            }),
-            new Promise((resolve, reject) => {
-                if (overlay.complete) resolve();
-                else {
-                    overlay.onload = resolve;
-                    overlay.onerror = reject;
-                }
-            })
-        ]);
-
         const canvas = document.createElement('canvas');
         const ctx = canvas.getContext('2d');
-        canvas.width = 500;
-        canvas.height = 500;
-
-        // رسم الصورة الخلفية داخل دائرة
-        ctx.beginPath();
-        ctx.arc(canvas.width / 2, canvas.height / 2, canvas.width / 2, 0, Math.PI * 2);
-        ctx.closePath();
-        ctx.clip();
-        ctx.drawImage(profileImg, 0, 0, canvas.width, canvas.height);
-
-        // رسم الصورة العلوية بشفافية
-        ctx.globalAlpha = 0.5;
-        ctx.drawImage(overlay, 0, 0, canvas.width, canvas.height);
+        canvas.width = 300;
+        canvas.height = 300;
+
+        // رسم صورة ps.png
+        ctx.drawImage(overlayImg, 0, 0, canvas.width, canvas.height);
+
+        // تفعيل الشفافية إذا كانت الصورة الشفافة
+        if (type === 'transparent') {
+            ctx.globalAlpha = 0.5;
+        }
+
+        // رسم الصورة المستوردة
+        if (type === 'circle') {
+            ctx.beginPath();
+            ctx.arc(canvas.width / 2, canvas.height / 2, canvas.width / 2 * 0.8, 0, Math.PI * 2);
+            ctx.closePath();
+            ctx.clip();
+            ctx.drawImage(profileImg, canvas.width * 0.1, canvas.height * 0.1, canvas.width * 0.8, canvas.height * 0.8);
+        } else {
+            ctx.drawImage(profileImg, 0, 0, canvas.width, canvas.height);
+        }
+
         ctx.globalAlpha = 1;
 
-        // إضافة الهاشتاج "#IStandWithPalestine"
+        // إضافة الهاشتاج
         ctx.font = "16px Arial";
         ctx.fillStyle = "white";
         ctx.textAlign = "center";
-        ctx.fillText("#IStandWithPalestine", canvas.width / 2, canvas.height - 15);
+        ctx.fillText(selectedHashtag, canvas.width / 2, canvas.height - 15);
 
         // تصدير الصورة
         const link = document.createElement('a');
-        link.download = 'combined-image.png';
+        link.download = type === 'transparent' ? 'transparent-image.png' : 'circle-image.png';
         link.href = canvas.toDataURL('image/png');
         link.click();
     } catch (error) {
         console.error("خطأ أثناء التصدير:", error);
         alert("حدث خطأ أثناء تصدير الصورة. الرجاء المحاولة مرة أخرى.");
     }
-}
-
-// تفعيل زر التصدير عند النقر عليه
-document.getElementById('export-btn').addEventListener('click', exportImage);
+}