כיצד לייעל תמונות בענן?

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

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

שיטה 1 מתוך 2: שימוש ב- AWS s3 ולמבה

  1. 1
    הגדר את AWS s3. התחל עם הגדרת דלי AWS S3 שלך אם עדיין לא יצרת. Amazon S3 מאפשר לך לאחסן כל כמות נתונים ועד 5GB בחינם. עיין במאמר העלה ל- amazon s3 כדי להגדיר ולהגדיר את חשבון AWS S3 שלך. לאחר שתסיים עם זה, צור שתי תיקיות בדלי שלך, ושם אותן מקוריות וגודל. כפי שהשם מרמז, הספריה המקורית מאחסנת את התמונה המקורית ואילו הספרייה שהגודל שלה מאחסנת את התמונה שגודלה.
  2. 2
    כתוב את קוד האופטימיזציה. אנחנו הולכים להשתמש async, aws-sdk, gm, ו pathlibs עבור קוד אופטימיזציה ההדגמה. יהיה עליך להתקין את הצומת ואת כל התלות תחילה ולאחר מכן להעתיק את הקוד הבא ל- imageResizer.js.
    // תלות var async = דורש ('async'); var AWS = דורש ('aws-sdk'); var gm = require ('gm'). subClass ({imageMagick: true}); // אפשר שילוב ImageMagick. var util = דורש ('util'); var path = דורש ('נתיב'); // קבועים var WEB_WIDTH_MAX = 150; var WEB_HEIGHT_MAX = 150; var imageResponse; // קבל התייחסות ללקוח S3 var s3 = AWS.S3 חדש (); exports.handler = פונקציה (אירוע, הקשר, התקשרות חוזרת) {// קרא אפשרויות מהאירוע. console.log ("אפשרויות קריאה מאירוע: \ n", util.inspect (אירוע, {עומק: 5})); var srcBucket = event.Records [0].s3.bucket.name; // מפתח האובייקט עשוי לכלול רווחים או תווים ללא קידוד שאינם ASCII. var srcKey = decodeURIComponent (event.Records [0].s3.object.key.replace (/ \ + / g, "")); // var dstBucket = srcBucket + "resised"; var imageName = נתיב.שם בסיס (srcKey); var dstBucket = srcBucket; var imageResponse; // הסיקו את סוג התמונה. var typeMatch = srcKey.match (/\.([^.] *)$/); if (! typeMatch) {callback ("לא ניתן היה לקבוע את סוג התמונה."); לחזור; } var imageType = typeMatch [1]; אם (imageType.toUpperCase ()! = "jpg". toUpperCase () && imageType.toUpperCase ()! = "png".toUpperCase () && imageType.toUpperCase ()! = "jpeg". toUpperCase ()) {callback ('סוג תמונה לא נתמך: $ {imageType}'); לחזור; } פונקציה uploadWebMax (תגובה, מאגר, הבא) {// זרם את התמונה שהופכה לדלי S3 אחר. var dstKeyResized = "גודל /" + imageName; s3.putObject ({Bucket: dstBucket, Key: dstKeyResized, Body: buffer, ContentType: response.ContentType}, function (err, data) {if (err) {console.log (err, err.stack);} אחר { לנחם.יומן ('הועלה ל- web-max בהצלחה!!'); הבא (null, תגובה, חיץ); }}); } 
  3. 3
    הגדר את תצורת AWS למבדה. לאחר מכן, עליך להתחבר למסוף AWS ולבחור במבדה מהשירותים. מדף למבדה בחר בלחצן 'צור את פונקציית למבדה'.
    לאחסון תמונות ומדיה אחרת בענן יש יתרונות נוספים
    בניגוד לסוגי נתונים אחרים, לאחסון תמונות ומדיה אחרת בענן יש יתרונות נוספים.
  4. 4
    צור פונקציית lambda לאופטימיזציה של תמונות. תתבקש לבחור שרטוט. לחץ על פונקציה ריקה.
    • הגדר את הדק. תתבקש להוסיף טריגר שיפעיל את פונקציית הלמבה. בחר S3 כאן.
    • בחר את הדלי שיצרנו קודם. הגדר את סוג האירוע לאובייקט שנוצר (הכל) והקידומת למקור /. לחץ על הבא.
    • בחר שם פונקציה. בחר מיקוד להזנת קוד והשתמש בהעלאת ה- zip שיצרנו קודם. האפשרות המוטבעת החלופית יכולה להשתמש אם אין שום תלות.
  5. 5
    הגדר את תפקידי ה- IAM. כעת תצטרך למלא את שם המטפל ואת תפקיד ה- IAM עבור למבה. בשדה "Lambda handler function and role", שנה את שם המטפל ל- imageResizer.js. השם של קובץ js בתוך ה- zip שלנו והמטפל צריך להתאים. בכרטיסיה תפקידים, בחר באפשרות תפקיד מותאם אישית. תוכלו להגדיר תפקידים חדשים ולהוסיף מדיניות כאן.
  6. 6
    בוצע. מהמסך הסופי, לחץ על לחצן הפונקציה יצירה. מזל טוב, יצרת בהצלחה פונקציית lambda שמייעלת תמונה ואז מעבירה אותה לתיקיית הגודל. באפשרותך לפרסם תמונות חדשות לדלי המקורי ולשלוף את גרסת התמונה שגודלה השתנה מהדלי שהגודל השתנה.

שיטה 2 מתוך 2: שימוש ב- cloudinary ו- node.js

  1. 1
    הגדר ותגדיר את חשבונך. בדומה לזו של S3, ל- Cloudinary יש תוכנית שכבה חופשית שתוכלו להשתמש בה. ברגע שאתה מחובר, רשום לפניך את cloud_name, api_keyואת api_secret.
    // תלות var async = דורש ('async')
    // תלות var async = דורש ('async'); var AWS = דורש ('aws-sdk'); var gm = דורש ('gm').
  2. 2
    הוסף את ספריית העננות לפרויקט שלך. ניצור דוגמה לדוגמה של Node.js כדי להדגים את פעולתו. התקן את הצומת.js אם עדיין לא עשית זאת. לאחר מכן, צור ספריה עבור פרויקט זה והתקן את התלות באמצעות npm.
    npm להתקין ענן 
  3. 3
    הגדר את האישורים. ייבא את התלות לפרויקט הצומת שלך והגדר את האישורים שציינת בשלב 1.
    cloudinary.config ({cloud_name: 'sample', api_key: '874837483274837', api_secret: 'a676b67565c6767a6767d6767f676fe1'}); 
  4. 4
    צור פונקציית העלאה. כתוב פונקציית העלאה המבקשת async לשרת הענן. אנו הולכים להשתמש בתמונה סטטית, אך למטרות מעשיות, פונקציית ההעלאה תיקרא בהגשת הטופס. לחלופין, אתה יכול להעלות במהירות על צד הלקוח על ידי ביצוע שיחת AJAX. תוכלו לקרוא עוד על העלאת קבצי AJAX בדף התיעוד שלהם.
    העלאת פונקציה (קובץ, אפשרויות, התקשרות חוזרת) {cloudinary.v2.uploader.upload ("/ home / my_image.jpg", פונקציה (שגיאה, תוצאה) {console.log (תוצאה)}); 
  5. 5
    הבן את התגובה מהשרת. Cloudinary מקצה מזהה ציבורי וכתובת אתר שבה תוכלו להשתמש כדי להפנות את המשאב שהועלה. מכיוון ש- pubic_id הוא שם נרדף לשם התמונה, אתה יכול להגדיר את שם הציבור בזמן העלאת התמונה. לאחר שתסיים עם העלאת הקובץ, תקבל אובייקט החזרה שנראה כך:
    {public_id: 'cr4mxeqx5zb8rlakpfkg', גרסה: 1372275963, חתימה: '63bfbca643baa9c86b7d2921d776628ac83a1b6e', רוחב: 864, גובה: 576, פורמט: 'jpg', resource_type: 'image', created_at: 2017-06: '2017-06:', בתים: 120253, סוג: 'העלאה', url: 'https://res.cloudinary.com/demo/image/upload/v1372275963/cr4mxeqx5zb8rlakpfkg.jpg', secure_url: 'https://res.cloudinary.com/ הדגמה / תמונה / העלאה / v1372275963 / cr4mxeqx5zb8rlakpfkg.jpg '} 
    Var srcKey = decodeURIComponent (event.Records [0].s3.object.key.replace (/ \ + / g
    Var srcKey = decodeURIComponent (event.Records [0].s3.object.key.replace (/ \ + / g, "")); // var dstBucket = srcBucket + "resised"; var imageName = path.basename (srcKey); var dstBucket = srcBucket; var imageResponse; // הסיקו את סוג התמונה.
  6. 6
    בצע אופטימיזציה של התמונה: לצורך אופטימיזציה של התמונה, ישנן מספר דרכים בהן תוכל לעשות זאת - באמצעות כתובת ה- URL או ה- libinary cloud.
    • אופטימיזציה של התמונה באמצעות כתובת ה- URL. באפשרותך לשנות את הגודל, הממד, האיכות ומאפיינים רבים אחרים של התמונה על ידי שליחת בקשה לכתובת האתר של התמונה בפועל. התמונות שהופכו נוצרו על פי דרישה ומוחזרות לשרת הצומת שלך. הנה דוגמה לאופטימיזציה של תמונה בפעולה:
      https://res.cloudinary.com/demo/image/upload/q_60/sample.jpg 
    • מיטוב התמונה בשיטת הספרייה. לחלופין, תוכל להשתמש בשיטת הספרייה כדי לבצע את השינוי. הטיעון הראשון הוא public_id של התמונה ופרמטר שני הוא אובייקט שמורכב מפרמטרי האופטימיזציה.
      cloudinary.image ("sample.jpg", {quality: 50}) 
  7. 7
    זהו זה. יש לך פיתרון מלא לעבודה של מניפולציה של תמונות המשולב ביישום הצומת שלך.

טיפים

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

FacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail