שלח תשובה

זירת השאלות

367
צפיות
5
תשובות

לולאה יעילה

,‏ 7 בפברואר, 2005

אני מעוניין בהקטנת מימדי תמונה (אופן הופעתה) באמצעות צד לקוח כמובן.
בתחילה עשיתי כך :


var img = document.createElement("img") // OR new Image()
img.src = "somePicture.jpg";
document.write("<img src=somePicture.jpg height=" + img.height/2 + " width=" + img.width/2 + " align=right >");



בעצם חילקתי את מימדי התמונה (רוחב וגובה) ב2 .
עכשיו אני מעוניין בהקטנת תמונה (אשר יכולה להגיע למימדים של 2000-3000 של רוחב/גובה) לגודל מסויים (לא ספציפי) שלא יהיה יותר מ250 רוחב ו125 גובה.
כמובן אם הייתי רוצה שהגודל הזה יהיה רלוונטי לכל התמונות, לא הייתי בכלל צריך לערב JS בעניין – אך ישנם תמונות שההפרש בין הגובה לרוחב שונים – וקביעת גודל אחד משנה את הצורה המקורית.

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

השאלה היא – כיצד אני יכול להגיע למצב שבו אני מחלק את מימדי התמונה אך דואג במקביל (לאחר החלוקה) שהגודל לא עבר את ה250 רוחב ו125 גובה.

אפשרי בכלל?

תגיות:

5 תשובות

  1. ניר טייב הגיב:

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

    אם יהיה לי זמן מחר אני אעלה קוד.

    בהצלחה

  2. prince01 הגיב:

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

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

  3. זהר פלד הגיב:

    למה לולאה, כשאפשר להשתמש במתימטיקה?
    אתה יכול לחשב את היחס בין הגודל של התמונה לגודל המותר
    (גם רוחב וגם אורך) ואז לחלק את המימדים לפי היחס היותר גדול…
    פונקציה פשוטה:

                function resizeImage(oImg, iMaxWidth, iMaxHeight) {
                    var iWidthRatio, iHeightRatio, maxRatio, newWidth, newHeight;
                    iWidthRatio = oImg.width / iMaxWidth;
                    iHeightRatio = oImg.height / iMaxHeight;
                    maxRatio = Math.max(iWidthRatio, iHeightRatio);
                    newWidth = oImg.width / maxRatio ;
                    newHeight = oImg.height / maxRatio;
                    oImg.width = newWidth;
                    oImg.height = newHeight;
    }

  4. אוריקס הגיב:

    בלי להתייחס לשאר ההודעה
    ההערה בשורת הקוד הראשונה מיותרת… תמיד עדיף createElement.

שלח תשובה

חדש! אחסון אתרים של וובמאסטר

שירות אחסון אתרים
המקצועי של וובמאסטר!

מומחים באירוח אתרי
WordPress, Joomla, Drupal

  • שרתי לינוקס עם CloudLinux, LiteSpeed
  • 1GB דיסק SSD, 10GB תעבורה חודשית
  • ממשק ניהול cPanel, תעודת SSL חינם

עכשיו במחיר היכרות:
רק 420 ש"ח לשנה!