שימוש במצלמה של הטלפון הנייד
TakePicture, ותגית img מוסתרת בהתחלה כדי שלא תופיע תמונה ריקה.navigator.camera.getPicture עם שתי פונקציות, אחת להצלחה ואחת לשגיאה, ואובייקט JSON עם הפרמטרים.src של תגית ה-img, ומשנים את התצוגה שלה ל-block.destinationType: Camera.DestinationType.DATA_URL - התמונה מתקבלת כמחרוזת Base64.destinationType: Camera.DestinationType.FILE_URI - התמונה מתקבלת כנתיב לקובץ.quality: 50 - איכות בין 0 ל-100.sourceType: Camera.PictureSourceType.PHOTOLIBRARY - בחירה מספריית התמונות במקום מהמצלמה.sourceType: Camera.PictureSourceType.SAVEDPHOTOALBUM - בחירה מאלבום.פרקי ההרצאה: שימוש במצלמה של הטלפון הנייד
תמלול ההרצאה: שימוש במצלמה של הטלפון הנייד
הטקסט המלא של הדקות הראשונות בהרצאה «שימוש במצלמה של הטלפון הנייד» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
אנחנו מגיעים לשימוש במצלמה של הטלפון הנייד. כאן אנחנו יכולים דרך פונגאפ ממש לצלם תמונה ולשמור את התמונה, לשלוח אותה לשרת אפילו, להציג אותה למשתמש ועוד כל מיני דברים.
אז בואו נראה איך אנחנו משתמשים בפונגאפ בכדי להשיג תמונה מהמצלמה. אנחנו נמצאים בקאמרה. בואו ניקח לחצן וכאשר אנחנו לוחצים עליו אנחנו רוצים לצלם תמונה.
אז יש לנו כאן input type button value take a picture on click איזושהי פונקציה שאנחנו כבר הולכים לבנות בנוסף בואו ניקח פה איזשהו אימג' תן לו איזשהו איידי, מיי אימג' ונגדיר כזה דבר קודם כל אנחנו לא רוצים שיראו על ההתחלה את התמונה מפני שאין לנו תמונה להציג כי המשתמש עדיין לא צילם תמונה זה יהיה
display none ב css תן לה איזשהו width נניח 150 פיקסלים ויש לנו כאן עכשיו את הרכיב של התמונה אוקיי בואו נעבור ונכתוב את הפונקציה TakePicture.
אז איך בעצם אנחנו משתמשים בפונגאפ בשביל לצלם תמונה? מה שאנחנו צריכים לעשות זה לפנות לאובייקט Navigator, נקודה Camera, אובייקט שפונגאפ שתלה בתוך Navigator, ולקרוא לפונקציה GetPicture.
פונקציה GetPicture אומרת לנו תביאו לי שלושה ערכים, שתי פונקציות אינליין ואובייקט ג'ייסון עם כל מיני פרמטרים בנוגע לתמונה.
פונקציית inline ראשונה אני אקרא לה כאשר יהיה הצלחה בלכידת התמונה ואני אשלח לה את ה-image data פה אנחנו צריכים לכתוב תכף מה לעשות כשנקבל את התמונה פונקציה נוספת פונקציית inline שאמורה להכיל איזשהו error ואני אקרא לה רק אם אני לא אצליח לקבל את התמונה
ואובייקט json נוסף שמכיל מספר פרמטרים לגבי התמונה שאנחנו רוצים לשלוח אז בואו נתחיל לבנות את הפונקציות ואת האובייקט. אז יש לנו כאן את הפונקציה הראשונה, נרד פה שורה, יש לנו את הפונקציה השנייה, נרד פה שורה, ויש פה את האובייקט json שתכף נראה מה אנחנו נותנים לו.
אז מה אנחנו רוצים לעשות כאשר הצלחנו לקבל תמונה? כאשר הצלחנו לקבל תמונה כל מה שאנחנו רוצים לעשות זה להכניס את התמונה עצמה לסורס של אובייקט האימג' שפתחנו ב-HTML.
אנחנו יכולים לעשות את זה לדוגמה עם jQuery. נאתר את my-image ונפנה לאטריביוט שנקרא src ונכניס לתוכו איזושהי מכרוזת. והמכרוזת שאנחנו הולכים להכניס לתוכו זאת המכרוזת הבאה data.image/jpeg.data.
בייס 64 תפסיק ומשרשרים את זה עם האימג' דאטה שהתקבל. עכשיו בואו נסביר מה בדיוק קורה כאן. כאשר אנחנו מצליחים לצלם תמונה מהמצלמה אנחנו יכולים לקבל אותה על ידי מכרוזת שנחשבת עידוד בייס 64. מה זה אומר?
אנחנו יכולים לייצג כל מידע בינארי באמצעות מכרוזת שכל תו במכרוזת מקודד או יותר נכון כל בייט במידע הבינארי מקודד לאיזשהו תו ויש כל מיני קידודים אחד מהם נקרא בייס 64.
אז מה שקורה כאן זה שפונגאפ מאפשרת לנו לצלם תמונה והפונקציה get picture במידה והצליחה לצלם את התמונה מהטלפון הנייד נותנת לנו, קוראת לפונקציה הזאת ונותנת לנו את התמונה בפורמט בייס 64. זה כאילו שהיא נותנת לנו מחרוזת שמתארת את התמונה.
הרי תמונה זה לא מחרוזת, תמונה זה לא מידע טקסטואלי, תמונה זה מידע בינארי שמתאר פיקסלים ופורמט וכולי. אבל עדיין ניתן להפוך כל מידע בינארי למחרוזת, לדוגמה בפורמט בייס 64. וזה בדיוק מה שקורה במקרה הזה.
אם היינו מציגים פה על ידי אלרט את האימג' דאטה, היינו ממש מקבלים את המחרוזת, או יותר נכון רואים את המחרוזת עצמה מוצגת באלרט. אנחנו יכולים לעשות את זה ותכף נמחק את האלרט.
אם אנחנו רוצים להציג את התמונה והיא בבייס 64 ב-HTML אז אנחנו פשוט מציינים לדפדפן שאנחנו רוצים להציג תמונה, פורמט JPEG, כי זה הפורמט שפונגאפ מצלמת, שהנייד מצלם, והתמונה נמצאת בבייס 64 ובדיוק היא כאן.
אז זה כל מה שאנחנו רוצים לעשות. הדבר הבא שאנחנו רוצים זה להציג את אובייקט התמונה, מפני שאובייקט התמונה ב-HTML, התגית הזאת, אם שימו לב, הגדרנו שעל ידי CSS לא רואים אותה, כי אנחנו לא רוצים שבהתחלה היוזר יראה תמונה ריקה או תמונה עם שגיאה.
כאן אנחנו פשוט רוצים לפנות לסטיילינג שלה. בואו נעשה את זה גם כן על ידי jQuery. יש לנו כאן את MyImage. נלך לפונקציית CSS של jQuery, ונגדיר שאנחנו רוצים לפנות למאפיין שנקרא דיספליי ולהכניס לתוכו את הערך בלוק.
וזה יגרום להצגה של התמונה. מה אנחנו רוצים לעשות במידה ויש כישלון? במידה ויש כישלון אנחנו יכולים לדוגמה להציג איזשהו אלרט של ארור ונציג את ההודעה עצמה שמתקבלת.
הדבר האחרון שאנחנו צריכים לספק זה איזשהו פרמטר שהוא אובייקט ג'ייסון, שמחזיק לנו את הערכים הבאים דבר ראשון הquality מה האיכות של התמונה בואו ניתן לו 50 אמור להיות בין 0 ל-100 ואנחנו נותנים לו כזה ממוצע באמצע destination type זה יהיה navigator camera destination type שימו
לב על די גדולה ואנחנו פונים לדאטה underline url זה בעצם מציין בייס 64 אנחנו עכשיו ציינו את האיכות של התמונה שאנחנו מעוניינים בה ושאנחנו רוצים לקבל אותה בבייס 64. מה היתרון לקבל תמונה כקידוד?
כי אם יש לנו מחרוזת אנחנו יכולים לדוגמה לשלוח את המחרוזת הזאת לשרת כסטרינג רגילה לגמרי ואז בשרת לקבל ולשמור אותה באיזושהי תיקייה בצד של השרה. אוקיי, אז יש לנו בעצם גם פעולה לגבי הצלחה, זאת הפונקציה הזאת, גם פעולה לגבי כישלון, זאת הפונקציה הזאת, ואובייקט שמתאר בדיוק מה לעשות.
בואו נריץ את זה. אוקיי, Take a picture. Allow the camera to use and display your location.
כן, אנחנו רוצים. Allow. ואנחנו רואים עכשיו מעין טשטוש כזה או כל מיני צבעים בתור מצלמה.
בתור מה בדיוק אנחנו רואים. למה אנחנו רואים את הדבר הזה? מפני שהאמולטור עצמו לא יכול לצלם באמת תמונה אמיתית.
אז הוא אומר לנו, אני רק עושה לכם הדמיה כאילו זה מה שאני רואה דרך המצלמה. בואו תלחצו ותצלמו אותה.
אנחנו לוחצים. אנחנו שומעים כזה צילום או שאנחנו אומרים לו תיקח אחת חדשה או אקספט. בואו נלחץ על אקספט. הנה האלרט שמציג לנו את כל המחרוזת בואו נעשה אוקיי והנה התמונה שצילמנו.
ניקח עוד אחת נצלם נעשה