איך להציג תמונה גדולה מאד, ברזולוציה גבוהה?

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

זוהי התוצאה (מי שקורא RSS כנראה יצטרך להכנס לפוסט כדי לראות…) שמציגה תמונה גדולה מאד באמצעות ה-API של Google Maps. הרזולוציה גדולה ללא צורך להקטין את התמונה כדי שהדף יטען מהר. ניתן לעשות זום אל פרטים בתמונה והיא גם מוגנת מהורדה או שימוש באתרים אחרים. נסו את הזום… זה עובד. (הסבר כיצד לעשות זאת בהמשך הפוסט)

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

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

Google Maps, שירות המפות של גוגל, מאפשר להשתמש בפונקציות API בשביל להציג מפות או תמונות באמצעות מנגון הניווט על התמונה (זום, הזזה..).
התהליך מאד פשוט:
1. יש להוריד תוכנה חינמית, GMapImageCutter, לחיתוך תמונות עבור Google Maps (תיקייה מכווצת)
2. יש לפתוח את קובץ ה-ZIP והפעיל את קובץ GMapImageCutter.jar.
3. כעת שהתוכנה נפתחה, יש לבחור את התמונה באמצעות open file.

4. יש לאשר ולבצע את חיתוך התמונה. תווצר תיקיה ובה הרבה תמונות מוקטנות וקובץ HTML בשם התמונה.

5. כעת יש ליצור Pesonal key באתר  Google Maps
6. את הקוד שקיבלתם יש להכניס לתוך קובץ ה-HTML שנוצר בסעיף 4. (במקום בו רשום "PUTAPIKEYHERE"). ללא הקוד לא יהיה ניתן להציג את הדף באינטרנט (במחשב המקומי זה כן יעבוד בלי הקוד).
7. אפשר להטמיע את קובץ ה-HTML באמצעות IFRAME בכל דף אינטרנט…

via

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

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