חיתוך תמונה

[dor77]

שלום.
אני מעוניין להציב באתר שלי תמונה מוקטנת של סרטון מיוטיוב.
זו התמונה שהם מספקים:
http://i3.ytimg.com/vi/RiuLBrEFhfk/default.jpg

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

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

תודה רבה לכם.

[Liorl]

פוטושופ בהצלחה http://pic-u.info/upload/1390835371.png חתכתי לך

[dor77]

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

[Kfir.G]

תלוי אם אתה רוצה בצד שרת או צד לקוח..
צד לקוח הכי קל זה לעשות אלמנט מכיל כלשהו (נגיד DIV) שיש לו position:relative ומוגדר לו הגודל שאתה רוצה להציג. בתוכו אתה עושה את הIMG שלך ושם לו position:absulote ומסדר את המיקום שלו. שיטה פשוטה ועובדת ברוב הדפדפנים (ie6,ie7,ie8,ie9, chrome, ff, opera, safari יכול להיות שהיא עובדת בעוד דפדפנים, אני לא בדקתי).

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

מקווה שעזרתי

[IgalSt]

נכתב במקור על ידי Kfir.G

תלוי אם אתה רוצה בצד שרת או צד לקוח..
צד לקוח הכי קל זה לעשות אלמנט מכיל כלשהו (נגיד DIV) שיש לו position:relative ומוגדר לו הגודל שאתה רוצה להציג. בתוכו אתה עושה את הIMG שלך ושם לו position:absulote ומסדר את המיקום שלו. שיטה פשוטה ועובדת ברוב הדפדפנים (ie6,ie7,ie8,ie9, chrome, ff, opera, safari יכול להיות שהיא עובדת בעוד דפדפנים, אני לא בדקתי).

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

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

[BlueNosE]

אתה יכול גם להשתמש ב-imagecolorat (אני פשוט זוכר שאתה מתכנת PHP).

PHP קוד:

// Assumptions: $w = Image Width, $h = Image Height, $im = Image Resource

$black = 0x00;
$x = 0;$y = 0;
while (imagecolorat($im,$x,$y) == $black && $y <= $h) {
  if (++$x > $w) {
    $y++;
    $x = 0;
  }
} 


עכשיו תעשה CROP מקורדינטה $x,$y ותריץ את זה:

PHP קוד:

$x = $w;$y = $h;
while (imagecolorat($im,$x,$y) == $black && $y >= 0) {
  if (--$x < 0) {
    $y--;
    $x = $w;
  }
} 


תעשה שוב CROP, הפעם כש$x,$y זה הקורדינטות סיום שלך.



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

[dor77]

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

תודה!