חיתוך תמונות בחינם

כיצד זה עובד

החיתוך קורה כולו בדפדפן שלך באמצעות HTML5 Canvas API — ללא העלאה, ללא שרת. אתה גורר אזור בחירה ישירות על אלמנט קנבס, וכשאתה מחיל את החיתוך, מנוע ההצגה 2D המובנה של הדפדפן קורא רק את הפיקסלים הנבחרים ומקודד אותם מחדש ל-JPEG, PNG או WebP.

1. 1
   התמונה נטענת לזיכרון

   הקובץ שלך נקרא עם URL.createObjectURL(), שנותנת לדפדפן כתובת blob מקומית. HTMLImageElement מפענח את הקובץ כולו בלשונית הדפדפן — בייטי התמונה לעולם לא יוצאים מהמכשיר שלך.
2. 2
   Pointer Events מניעים את בחירת החיתוך

   Pointer Events API של הדפדפן (שמאחד קלט עכבר, מגע ועט) עוקב אחר גרירות על שכבת-על קנבס. לחיצה מחוץ לבחירה מתחילה מלבן חדש; לחיצה בפנים מזיזה אותו; לחיצה קרוב לפינה הימנית-תחתונה משנה את גודלו. הגדרות יחס-ממדים מוגדרות-מראש אופציונליות (1:1, 16:9, 4:3 וכו') מגבילות את הגיאומטריה במהלך הגרירה.
3. 3
   Canvas מצייר את התצוגה המקדימה החיה

   בכל שינוי חיתוך, הקשר Canvas 2D מצייר מחדש את התמונה, מחיל שכבת-על כהה מחוץ לבחירה, מנקה את אזור החיתוך כדי להציג את התמונה המקורית באמינות מלאה, ומניח מעליו רשת חוק-השלישים וידית שינוי-גודל טורקיזית.
4. 4
   toBlob() מקודד ומספק את התוצאה

   כשאתה לוחץ על חתוך, קנבס מחוץ-למסך חדש נוצר בממדי החיתוך המדויקים. ctx.drawImage() מעתיק רק את המלבן הנבחר, ו-canvas.toBlob() מקודד את התוצאה באמצעות מקודד JPEG, PNG או WebP המקורי של הדפדפן ברמת האיכות שבחרת. הפלט נמסר בחזרה ככתובת blob מקומית להורדה.

כלים קשורים