שילוב תמונה ענקית באתר, באמצעות גוגל
איך להציג תמונה גדולה מאד, ברזולוציה גבוהה?
נתקלתי בצורך זה בעת בניית אתר שיציג ציורים של אמא שלי (תמונות שמן של חומת ההפרדה. אני כל כך גאה, הן מדהימות). רציתי להציג את התמונות במלואן אך בנוסף לאפשר לצפות בפרטים מתוך התמונה היות ומדובר בטכניקה מאד מדוייקת ומוקפדת של ציור בשמן. התמונות הן ברזולוציה גבוהה, עד 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 בכל דף אינטרנט…
אפשרות נוספת:
zoomify היא תוכנה חינמית (יש גם לה גרסאות מקצועיות שעולות כסף). התוכנה חותכת את התמונה הגדולה למספר תמונות קטנות ובאמצעות נגן פלש שמצורף אליה, ניתן לצפות בתמונה המוגדלת, לעשות זום פנימה והחוצה ולגרור. יש לה מספר יתרונות: לא צריך להרשם, היא חופשית, לא מצאתי בשום מקום שאסור להוריד את זכויות היוצרים מתבנית התצוגה, קיימים פרמטרים שונים עבור נגן הפלאש והתצוגה. היא פשוטה וקלה לעבודה.
את קוד התבנית ניתן להטמיע בכל דף אינטרנט והתוצאה טובה מאד.
פרטים נוספים
קול
מדהים!
אני אוהב כשלוקחים שירות ומשתמשים בו למטרה אחרת לגמרי באופן כזה.
פששששש אתה גאון
הכי חשוב שאמא שלך ביקרה במחסום ליד הבית שלי.
פעם הבאה תודיע, אמא שלי תעשה עוגיות..
[...] אחרי נפילת השרת הגדולה, הבלוג חוזר. זה תמיד קורה אחרי משקיע קצת בפוסט כמו האחרון, למי שפספס, איך לשלב תמונה ענקית בדף אינטרנט. [...]
זה אחלה פתרון
אבל אם אני רוצה לעשות את זה למפה (הרעיון המקורי) אבל לשים במפה לינקים לדפים אחרים.
האם יש אפשרות לעשות את זה?
לא שידוע לי. אפשר להוסיף כיתוב (כולל קישורים) באופן קבוע באמצעות עריכת הקוד שה-GMapImageCutter מייצר. לא רק שאפשר להוסיף טקסט (וקישורים) אלא אפשר גם לקבוע את המיקומים שלהם על פני התמונה, אלא שהמיקום הוא קבוע (ולא יזוז עם התמונה שהיא כשכבה מתחתיו)
הציור של אמא שלך מדהים.
נראה ממש כמו צילום.
תודה. שאר הציורים כאן
[...] שנתיים וחצי פרסמתי את הפוסט שילוב תמונה ענקית באתר באמצעות ה-API של גוגל מפות. זה פוסט מגניב שאני אוהב כי הוא מסובך ועושה האקינג מאד [...]