שתי תמונות זו לצד זו היא בעיית קנה מידה

חבר שלח לי תמונת טלפון וצילום מסך וביקש אותם בתמונה אחת לרישום. הפלתי את שניהם לתוך קנבס בגדלים שלהם וקיבלתי משהו שאף אחד לא יקבל: תמונה של 4032 על 3024 עם צילום מסך צר של 1170 על 2532 לצדו, פס לבן ריק מתחת לצילום המסך, וכל העניין ברוחב 5202 פיקסלים. התמונות היו בסדר. הסידור היה הבעיה, וזו אותה בעיה בכל פעם, כי שני הקבצים כמעט אף פעם לא חולקים מימד. ההחלטה על איזה ציר יש ליישר קו היא כל העבודה, וכל השאר נובע ממנה.

TL;DR: מיזוג תמונות הוא החלטה על קנה מידה לפני שהיא החלטה מציירת. זה לצד זה מתאים כל תמונה לגובה הגבוה ביותר, הערימה תואמת לרוחב הרחב ביותר, ורשת תואמת את שניהם, וזו הסיבה שגם רשת צריכה לבחור בין חיתוך לבין השארת מקום. נמדד על צילום 4032x3024 לצד צילום מסך בגודל 1170x2532: זה לצד זה מייצר קנבס בגודל 5429x3024 עם צילום המסך מוגדל ל-1397x3024, ערימה של 4032x11750 צילום של 542x11750 צילום של 542x11750. בחר את המצב שבו אתה רוצה לשמור. כְּכ מיזוג תמונה מצייר את כל זה בלשונית הדפדפן, כך ששום דבר לא מועלה.

מדוע תמונות ממוזגות יוצאות נראות שגויות?

מכיוון שהכניסות הן צורות שונות ורוב הכלים מציירים אותן בכל גודל שהם מגיעים.

תמונת טלפון היא 4032 על 3024 בנוף. צילום מסך בטלפון הוא 1170 עד 2532. סריקה היא מה שהסורק החליט. הנח כל שניים מהם ברצף בגודל מקורי ואחד מהם מתנשא מעל השני, עם שטח מת שממלא את כל מה שנשאר מהמימד הגבוה יותר. זה נקרא כטעות ולא כפריסה, אפילו למישהו שלא יכול היה להגיד לך למה.

התיקון הוא לנרמל, והשאלה היחידה היא באיזה ציר. בשורה, החלק העליון והתחתון הם מה שהעין עוקבת אחריה, כך שהגבהים צריכים להתאים וכל תמונה לוקחת כל רוחב שיחס רוחב-גובה משלה נותן לה. בעמודה, הקצוות השמאלי והימני הם הקו, כך שהרוחבים תואמים במקום זאת. לרשת יש את שני הקצוות להחזיק, אז היא צריכה להתאים לשניהם, וזה המצב שבו משהו צריך לתת.

זה כל העיצוב. כל מה שמתחת הוא מה שנובע ממנו.

מה זה לצד זה עושה לצילום מסך גבוה?

זה מגדיל אותו, לפעמים יותר ממה שאתה רוצה.

הנה התוצאה הנמדדת עבור הזוג שלמעלה, שנלקחה מקוד הפריסה ולא משוערת:

מצב	בַּד מִפרַ	תמונה שצוירה ב	צילום מסך מצויר ב
זו לצד זה	5429 x 3024	4032 x 3024	1397 x 3024
מוּקסָם	4032 x 11750	4032 x 3024	4032 x 8726

זה לצד זה התאים את שניהם ל-3024, הגבוה מבין שני הגבהים, כך שצילום המסך עבר מ-2532 ל-3024 פיקסלים. זוהי הגדלה של 19%, שבצילום מסך של טקסט גלויה אם אתה מחפש אותו ובלתי נראה אם לא.

ערימה היא הדרמטית. התאמה לתמונה הרחבה יותר לקחה את צילום המסך מרוחב של 1170 עד 4032 פיקסלים, פקטור של 3.4, והקנבס יצא בגובה 11,750 פיקסלים. צילום המסך הוא כעת האובייקט הדומיננטי בתמונה ארוכה מאוד, וכל אות בו הוגדלה ביותר משלוש פעמים, דבר ששום כמות של דגימה מחדש לא מחדה.

הלקח הוא לא שמצב אחד עדיף. זה שהמצב מחליט איזו תמונה מוגדלת, אז בחר את הציר התואם שהתמונות שלך כבר מסכימות עליו. שתי תמונות טלפון בנוף חולקות גובה והולכות זו לצד זו ללא קנה מידה כלל. שני צילומי מסך מאותו טלפון חולקים רוחב וערימה בצורה מושלמת.

מתי כדאי לערום במקום ללכת זה לצד זה?

כאשר התוכן קורא כלפי מטה, או כאשר התמונות כבר באותו רוחב.

ערימה מתאימה לרצף: שלושה צילומי מסך של זרימת קופה, לפני ואחרי היכן שהאחרי שייך מתחת, שיחה שנלכדה בחלקים. זה גם נכון בכל פעם שהכניסות הגיעו מאותו מכשיר באותו כיוון, כי אז הרוחבים כבר תואמים ושום דבר לא משתנה.

זה לצד זה מתאים להשוואה, שבו העין צריכה לנוע על פניה ולא למטה, ולכל דבר שיוצג בשורה בפוסט, מכיוון שתמונה של 4032 על 11,750 גוללת ולא נראית.

יש סיבה מעשית להעדיף גם את השורה. רוב המקומות שמקבלים תמונה אחת מציגים אותו ברוחב קבוע, כך שמיזוג גבוה מאוד מתכווץ לרסיס. שורה של שלוש תמונות באותו גובה נשארת קריא ברוחב זה באופן שעמודה של שלוש אף פעם לא עושה.

מה יש לרשת להחליט שרצועה לא?

מה לעשות עם תמונה שאינה צורת התא, וזו שאלה שרצועה אף פעם לא צריכה לשאול כי היא מצמידה רק ציר אחד.

רשת מצמידה את שניהם. כל תא הוא באותו גודל, ותמונה 4:3 לא מתאימה לתא בצורת צילום מסך של 9:19.5. יש רק שתי תשובות כנות, והכלי מבקש ממך לבחור ביניהן:

• לְהַ מתאים לכל התמונה בתוך התא ומשאיר מקום סביבו. שום דבר לא אבוד, והרשת נראית מעט מרופטת כי כל תמונה יושבת על רקע משלה.
• כיסוי ממלא את התא לחלוטין על ידי הוצאת יבול במרכז מהתמונה. הרשת נראית אחידה, וקצוות התמונות נעלמו.

אף אחד מהם לא נכון באופן כללי. Contain מתאים לצילומי מסך, מסמכים, דיאגרמות וכל דבר שבו קצה נושא מידע. הכיסוי מתאים לפרצופים, לנוף ולמרקם, כאשר יבול מרוכז הוא מה שאדם היה עושה בכל מקרה.

ברירת המחדל כאן היא כיסוי, כי הסיבה הנפוצה ביותר לבנות רשת היא שהיא צריכה להיקרא כאובייקט אחד.

כמה תמונה זורקת מכסה?

יותר ממה שאנשים מצפים כשהכניסות הן צורות שונות, ושום דבר בכלל כשהן תואמות.

גודל התא הוא הממוצע של הכניסות, כך ששתי תמונות שונות מאוד מייצרות תא שלא מתאים לאף אחד מהם. עבור זוג התמונות וצילומי המסך, ברשת דו-תאים, קוד הפריסה מדווח בדיוק על מה שצויר:

תַדמ	יליד	אזור מקור מצויר	פיקסלים נשמרו
צילום	4032 x 3024	2831 x 3024	70.2%
סֶרֶ	1170 x 2532	1170 x 1250	49.4%

חצי מצילום המסך נעלם. לא דחוס, לא מוקטן: קצוץ, למעלה ולמטה, כי תמונה צרה גבוהה שנאלצת לתוך תא כמעט מרובע צריכה לאבד את קצותיה. אם צילום המסך הזה היה קבלה, הסכום כבר לא בתמונה.

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

כמה עמודות צריכה להיות לרשת?

מספיק שהתוצאה רחבה יותר ממה שהיא גבוהה, מה שעבור רוב הספירות אומר שהשורש הריבועי מעוגל כלפי מטה.

השורות נובעות מהעמודות ומהספירה, והחשבון לא סלחן. שתים עשרה תמונות בארבע עמודות הן שלוש שורות מלאות. שבע תמונות בשלוש עמודות הן שלוש שורות עם שני תאים ריקים בקצה, שהפריסה משאירה כרקע במקום למתוח את התמונה האחרונה כדי למלא אותן.

תמונות	אֵזוֹ	תוצאה
4	2	2 x 2, אין פערים
6	3	2 x 3, ללא פערים
7	3	3 שורות, שני תאים ריקים
9	3	3 x 3, אין פערים
12	4	3 x 4, ללא פערים

ספירה שגורמת לנקיות ראויה לשאוף אליה. אם יש לך שבע תמונות והפינה הריקה מפריעה לך, התיקונים הכנים הם להפיל אחת, להוסיף אחת או לקבל אותה, כי שום סידור של שבעה תאים שווים אינו מלבן.

למה יש הגדרת פערים, ומה זה צריך להיות?

כי תמונות נוגעות נקראות כתמונה אחת, ולפעמים זה שגוי.

פער של אפס מתאים לפנורמה, עבור לפני ואחרי זה צריך להיראות כמו מסגרת אחת, ולכל דבר שבו התפר הוא הנקודה. זה ברירת המחדל כאן מסיבה זו.

פער נכון כאשר התמונות הן דברים נפרדים שבמקרה נמצאים בקובץ אחד: שלושה צילומי מוצר, סט צילומי מסך, קולאז'. איפשהו בין 8 ל-24 פיקסלים עושה את העבודה על תמונות של כמה אלפי פיקסלים, והמחוון מגיע ל-80 לעבודה גדולה יותר. הפער מוחל מסביב מבחוץ וגם בין לבין, כך שלתוצאה יש גבול ולא תמונות המדממות מהקצה.

דבר אחד שכדאי לדעת לפני בחירת PNG למיזוג פער: הפער מלא בלבן, לא נשאר שקוף. הקנבס נצבע בלבן לפני שמשהו נמשך, מכיוון של-JPEG אין ערוץ אלפא ופער לא צבוע מייצא כשחור. ל-PNG מכלי זה יש אפוא מרזבים לבנים ולא שקופים, מה שחשוב אם תכננתם להניח את התוצאה על רקע צבעוני.

כמה גדולה התמונה הממוזגת?

גדול יותר מהכניסות, ובמקרה המוערם הרבה יותר גדול, כי שום דבר לא נדחס.

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

12 תמונות טלפון ברשת ארבע עמודות מגיעות ל-16,208 על 9,136 פיקסלים, שהם 148 מגה פיקסל. שם מתחיל הסעיף הבא.

מדוע הפלט נעצר ב-8,000 פיקסלים?

מכיוון שמעבר לגודל מסוים, קנבס דפדפן מפסיק לעבוד, והוא לא אומר זאת.

הגבול אינו מפרט. MDN מנסח זאת בצורה ברורה: רוב הדפדפנים עולים על 10,000 על 10,000 פיקסלים, מכשירי iOS הוגבלו היסטורית ל-4,096 על 4,096, וחורגים מהמידות המקסימליות או השטח "הופך את הקנבס לבלתי שמיש" עם פקודות ציור שנכשלות בשקט. אין יוצא מן הכלל לתפוס. אתה מקבל תמונה ריקה, או כלום. דמויות לכל דפדפן נאספות ב- תוצאות בדיקה בגודל קנבס, שהוא ההתייחסות שכדאי לבדוק לפני הנחת מספר.

אז הפריסה מוקטנת כדי להתאים לצד ארוך של 8,000 פיקסלים במקום לאפשר לו להיכשל. עבור אותה שתים עשרה רשת תמונות, מקדם קנה המידה הוא 0.494, ויורד 16,208 על 9,136 עד 8,000 על 4,509, שהם 36 מגה פיקסל. כל תמונה נוחתת בערך ב-1,976 על 1,483 במקום 4,032 על 3,024.

זה אובדן רזולוציה אמיתי, וזה ה-Honest Trade: תמונת 36 מגה פיקסל שקיימת מנצחת תמונה של 148 מגה פיקסל שהדפדפן מסרב לצייר. אם אתה צריך את הרזולוציה המלאה של שתים עשרה תמונות, מיזוג אותן בפחות חלקים גדולים יותר, או השתמש בכלי שולחני ללא קנבס בדרך.

האם התוצאה צריכה להיות PNG או JPG?

jpg לצילומים, PNG לצילומי מסך וכל דבר עם טקסט או צבע שטוח.

זה הכלל הרגיל והמיזוג לא משנה אותו, אבל המיזוג כן גורם לזה להיות חשוב יותר, כי התפוקה גדולה. מיזוג 5429 עד 3024 של שני תצלומים הוא קובץ שתבחין בגדלים של PNG ולא יהיה באיכות jpeg 0.92, ובו זה מה זה מייצא.

הצד האחורי מתקיים עבור צילומי מסך. תת-דגימת כרומה ו-Block Transform של JPEG מייצרת שוליים גלויים סביב קצוות טקסט חדים, ורצועה ממוזגת של צילומי מסך היא בעיקר קצוות טקסט חדים. PNG הוא ללא אובדן, כך שהטקסט נשאר בדיוק כמו שהיה.

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

האם המיזוג מאבד איכות?

הציור לא, אבל קנה המידה עשוי, וכדאי לדעת מהו איזה.

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

קנה המידה הוא המקום שבו האיכות הולכת. כל תמונה שהוגדלה כדי להתאים לשכן גבוה יותר נדגמת מחדש, מה שממציא פיקסלים שמעולם לא צולמו. צילום מסך מוגדל פי 3.4 כדי להתאים לרוחב של תמונה הוא רך בצורה שאין כאן הגדרה מתקבעת. שום דבר לא עולה מעבר לקלט הגדול ביותר על הציר המותאם, כך שיש תקרה, אבל תמונה קטנה ליד גדולה עדיין נמתחת כדי להגיע אליה.

ואז יש את הייצוא. הבחירה ב-JPG מקודדת הכל מחדש, כולל הכניסות שכבר היו JPEG, שהוא דור שני של דחיסה אובדן על אלה. זה אותו מנגנון המתואר ב המדריך האודיו על חילוץ רצועה, במדיום אחר: פענוח משהו מאבד ודחוס אותו שוב לעולם אינו בחינם. באיכות 0.92 העלות קטנה, ולרצועת צילום ממוזגת זו השיחה הנכונה בכל מקרה.

באיזה סדר נכנסות התמונות?

הסדר שהוספת אותם, משמאל לימין או מלמעלה למטה, והדרך היחידה לשנות אותו היא להסיר אחד ולהוסיף אותו שוב.

כדאי לדעת זאת לפני שתבחרו שנים עשר קבצים בבת אחת, מכיוון שקוטף קבצים מוסר אותם בסדר משלו, שהוא בדרך כלל אלפביתי לפי שם קובץ ומדי פעם לא. עבור רצף שחשוב, כמו זרימת קופה, הוספתם אחד בכל פעם לפי הסדר שאתה רוצה זה פחות עבודה מאשר לתקן את זה לאחר מכן.

שלושים תמונות הן התקרה. זה לא מגבלת קנבס, זה מגבלת שפיות: מיזוג של שלושים תמונות טלפון הוא רשת של 30 מגה פיקסל אחרי הכובע ופריסה שאף אחד לא יכול לקרוא.

מה תמונה ממוזגת לא נותנת לך?

כל מה שעושה כלי עיצובי, שהוא הגבול הכנה של כלי מיזוג.

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

אם אתה רוצה קולאז' ממוסגר עם טקסט, זו עבודת עיצוב וכלי עיצוב. אם אתה רוצה לשים שלוש תמונות בקובץ אחד כדי שמשהו שמקבל תמונה אחת יקבל את שלושתם, זה זה. ההתייחסות לשני כאל גרסה חלשה של הראשונה היא מקור האכזבה הרגיל.

שני כלים סמוכים מכסים את המעקבים הנפוצים: הוספת טקסט לתמונה לכיתוב, ו מדחס התמונה כאשר רשת תמונות ממוזגת יוצאת גדולה ממה שמאפשרת מגבלת העלאה.

למה זה פועל בדפדפן?

מכיוון שהתמונות אף פעם לא צריכות ללכת לשום מקום, וברגע שהן עולות, זו החלטה של מישהו אחר מה קורה להם.

כל המיזוג הוא פעולת קנבס. הקבצים שלך מפוענחים לזיכרון העמוד, מצוירים על בד בכרטיסייה, והקנבס מועבר בחזרה כהורדה דרך toBlob. אף בקשה לא נושאת תמונה, שום דבר לא נכתב לשרת, ואין עותק מאוחסן לאף אחד להדליף או לשכוח.

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

העלות היא תקרת הקנבס שתוארה לעיל והעובדה שמיזוגים גדולים מאוד מוגבלים על ידי כמות הזיכרון שהלשונית יכולה להחזיק. עבור שתי תמונות, או שתים עשרה, גם לא גבול שתעמוד בו.