שינוי גודל התמונה בחינם

כיצד זה עובד

שינוי הגודל קורה כולו בדפדפן שלך באמצעות Canvas API — אותו מנוע הצגה מובנה ב-Chrome, Firefox ו-Safari. התמונה שלך מצוירת על קנבס מחוץ-למסך בממדים החדשים ומקודדת מחדש מקומית; שום דבר לא יוצא מהמכשיר שלך.

1. 1
   התמונה מפוענחת על ידי הדפדפן

   כשאתה גורר או בוחר קובץ, הדפדפן מפענח את התמונה (JPEG, PNG, WebP, AVIF או GIF) לנתוני פיקסל גולמיים דרך HTMLImageElement. ממדי הפיקסל המקוריים נקראים ומשמשים למילוי מראש את שדות הרוחב והגובה.
2. 2
   Canvas מצייר מחדש בגודל החדש

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

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

   ה-Blob המקודד הופך לכתובת אובייקט עבור פאנל התצוגה המקדימה — ללא מסע הלוך-חזור לשרת. לחיצה על הורדה מפעילה שמירה מקומית עם שם קובץ שכולל את ממדי הפיקסל הסופיים.

כלים קשורים