จัดการรูปภาพบนเว็บง่ายๆด้วย Cloudinary

ให้ Cloudinary ช่วยจัดการรูปบนเว็บไซต์ของเรา โคตรจะง่าย

Published in

I GEAR GEEK

3 min readMar 26, 2018

Cloudinary คือ Software-as-a-Service (SaaS) หรือ ซอฟต์แวร์แอปพลิเคชั่นที่ให้บริการผ่านอินเทอร์เน็ต Cloudinary เป็นแพลตฟอร์มที่ช่วยในการจัดการรูปภาพ และ วีดีโอ สำหรับเว็บไซต์และแอปพลิเคชั่น
Cloudinary มีโซลูชั่น แบบ end-to-end สำหรับรูปภาพและวีดีโอทั้งหมดของคุณ
ตั้งแต่ อัปโหลด(upload), การจัดเก็บ(storage), การบริหารการจัดการ(administration), เครื่องมือการจัดการ(manipulation) และ การส่งมอบ(delivery)
การอัปโหลดการประมวลผลและการส่งมอบจะทำบนเซิร์ฟเวอร์ของ Cloudinary และปรับขนาดโดยอัตโนมัติเพื่อจัดการกับการโหลดของผู้ใช้งานให้เหมาะสมกับ อุปกรณ์(device)นั้นๆ

ลูกค้ารายใหญ่ของ Cloudinary มีใครบ้าง ?

ดูเพิ่มเติมได้ที่ https://cloudinary.com/customers

มันดีมากสำหรับนักพัฒนาซอฟต์แวร์ (Developers)

ช่วยลดเวลาจากการ ศึกษาและพัฒนา และสามารถลดค่าใช้จ่ายลง 90%
สามารถ ใช้ร่วมกับ Framework มากมาย ได้อย่างง่ายดาย
มี Features ในการจัดการรูปภาพที่ดีและมากมาย
มีการจัดการรูปภาพ, APIs สำหรับ อัปโหลด, เรียกใช้งาน และ ระบบการจัดการ ไว้ให้ในระบบ Cloud
ประสบการณ์ของผู้ใช้ที่ดีขึ้น: เว็บไซต์ของคุณดูโหลดได้อย่างรวดเร็วบนอุปกรณ์ใดก็ได้

Architecture และ Concepts ของ Cloudinary

ระบบของ Cloudinary จะทำทุกอย่างบน Cloud รูปภาพและวีดีโอของคุณจะถูกจัดส่งผ่าน Server ที่ที่มีประสิทธิภาพสูงผ่านทาง CDN(Content Delivery Networks)
รูปภาพและวีดีโอที่อัปโหลดไปยัง Cloudinary ทั้งหมดจะถูกเก็บไว้อย่างปลอดภัย
และจัดการโดย Cloudinary

โซลูชั่นการจัดการ ของ Cloudinary ประกอบด้วย

Server ประสิทธิภาพสูงที่สนับสนุนการอัปโหลดและดาวน์โหลดได้อย่างรวดเร็ว
พื้นที่จัดเก็บที่พร้อมใช้งานสูงและมั่นใจได้ว่าทรัพยากรของคุณจะพร้อมใช้งานและปลอดภัยอยู่เสมอ
Server การประมวลผลที่มีประสิทธิภาพสูงสำหรับการสร้างภาพและวิดีโอที่คุณต้องการ

ภาพรวม Service architecture ของ Cloudinary

credit by https://cloudinary.com/documentation/solution_overview#service_architecture

Delivery lifecycle ของ Cloudinary

Delivery lifecycle ของ Cloudinary ประกอบไปด้วย 5 ขั้นตอน คือ การอัปโหลด, การจัดเก็บ, การจัดการ, การดัดแปลง และ การเรียกใช้งาน

เมื่อรูปภาพต้นฉบับถูกอัปโหลดไปยังบัญชี Cloudinary ของคุณแล้ว
คุณสามารถจัดการผ่าน secured APIs หรือ Management Console
และฝัง URL ในเว็บเพจของคุณเพื่อเรียกใช้งานข้อมูลต้นฉบับในรูปแบบต่างๆ
การเรียกใช้งานผ่าน URL มีตัวช่วยเกี่ยวกับวิธีจัดการ(หรือดัดแปลง) ก่อนการส่งมอบ

ครั้งแรกที่มีเรียกใช้งานผ่านทาง URL
1. รูปภาพถูกร้องขอโดยเบราว์เซอร์ของผู้ใช้
2. ส่งคำขอรูปภาพไปถึง CDN edge server ที่ใกล้เคียงที่สุด
3. CDN edge server จะตรวจสอบว่า Cached ถูก Cached ไว้หรือไม่ (ครั้งแรกคือไม่มี)
4. CDN edge server ร้องขอรูปภาพจาก Cloudinary
5. Cloudinary สร้างรูปภาพตามคำร้องขอ ใน URL
6. Cloudinary ส่งกลับรูปภาพไปยัง CDN edge server
7. CDN edge server Cached ข้อมูลรูปภาพไว้และส่งกลับรูปภาพไปยังเบราว์เซอร์ของผู้ใช้

ครั้งต่อไปที่มีเรียกใช้งานผ่านทาง URL (จะไม่ถูกคิด Transformations)
1. รูปภาพถูกร้องขอโดยเบราว์เซอร์ของผู้ใช้
2. ส่งคำขอรูปภาพไปถึง CDN edge server ที่ใกล้เคียงที่สุด
3. CDN edge server จะตรวจสอบว่าแคชถูก Cached ไว้หรือไม่
4. CDN edge server Cached ข้อมูลรูปภาพไว้และส่งกลับรูปภาพไปยังเบราว์เซอร์ของผู้ใช้

Management console และ Media library

Cloudinary มีระบบจัดการให้บนเว็บไซต์ ของ Cloudinary เอง โดยแบ่งเป็นส่วนหลักอยู่ 5 ส่วนได้แก่
1. Dashboard เป็นส่วนที่แสดง อัตราต่างๆ เช่น จำนวนรูป การอัพโหลด หรือ การเรียกใช้งาน เป็นต้น
2. Media library เป็นส่วนที่แสดงรูปภาพและวิดีโอของคุณที่ถูกอัพโหลดขึ้นมา
3. Transformations เป็นส่วนที่แสดง การแปลงรูปภาพที่ถูกเรียกใช้งาน
4. Reports เป็นส่วนที่แสดง ว่ารูปไหนถูกเรียกใช้งานมากที่สุด หรือ ถูกเรียกใช้งานจากประเทศไหน เป็นต้น
5. Settings เป็นส่วนที่เอาไว้ตั้งค่าต่างๆ ใน account ของคุณไม่ว่าจะเป็นการ อัปโหลด, ด้านความปลอดภัย เป็นต้น

“ คุยหนักคุยหนาว่าใช้งานง่าย โชว์ของหน่อย !!!”

ตัวอย่างการอัปโหลดรูปภาพ โดย Lib ของ Cloudinary ด้วย Node.JS

cloudinary.v2.uploader.upload(file, options, callback);

มีอยู่สามส่วนหลักๆคือ (ไฟล์ที่ต้องการอัปโหลด, การตั้งค่ารูป, ค่าที่ถูกส่งกลับมา)
ถ้าต้องการอัปโหลดรูป sample.jpg ก็จะได้ Code อย่างง่ายประมาณนี้

cloudinary.v2.uploader.upload('sample.jpg',
    { public_id: 'sample_id' },
    (error, result) => { console.log(result) })

และยังสามารถ อัปโหลดผ่านทาง API ของ Cloudinary แบบ POST ได้อีกด้วย

https://api.cloudinary.com/v1_1/<cloud name>/<resource_type>/upload

cloud name คือ ชื่อของ Cloudinary account ของคุณ
resource_type คือประเภทของไฟล์ที่ต้องการอัปโหลด. ได้แก่: image, raw, video และ auto

การอัปโหลดโดยการเรียก API แบบ POST จะต้องยืนยันคำขอการตรวจสอบสิทธิ์(โดยสามารถศึกษาได้จากคู่มือของ Unsigned uploads)

หลังจากอัปโหลดรูปแล้วในส่วนของผลลัพธ์ที่คืนกลับมาก็จะได้มาประมาณนี้

{
 public_id: 'sample',
 version: '1312461204',
 width: 864,
 height: 564,
 format: 'jpg',
 created_at: '2017-08-10T09:55:32Z',
 resource_type: 'image',
 tags: [], 
 bytes: 9597, 
 type: 'upload', 
 etag: 'd1ac0ee70a9a36b14887aca7f7211737', 
 url: 'https://res.cloudinary.com/demo/image/upload/v1312461204/sample.jpg',
 secure_url: 'https://res.cloudinary.com/demo/image/upload/v1312461204/sample.jpg',
 signature: 'abcdefgc024acceb1c1baa8dca46717137fa5ae0c3',
 original_filename: 'sample'
}

ตัวอย่างการเรียกใช้งานรูปภาพจาก Cloudinary ผ่าน URL

โดยจะมีโครงสร้าง ของ Url ดังต่อไปนี้

https://res.cloudinary.com/<cloud_name>/<resource_type>/<type>/<version>/<transformation parameters>/<public_id>.<format>

cloud_name -คือชื่อของ Cloudinary account ของคุณ
resource_type - คือประเภทของไฟล์ที่ต้องการเรียกใช้งาน โดยปกติจะเป็น: image. และมีค่าต่างๆเช่น: image, raw, และ video, fetch
type - ประเภทของการเรียก เช่น upload, private และ authenticated.
version - คุณสามารเรียกใช้งานเวอร์ชั่น จาก URL ไปยัง cached version บน CDN ตัวเลข เวอร์ชั่นจะได้จากหลังการอัปโหลดเสร็จ
transformations - (ไม่ต้องกำหนดก็ได้)คุณสามารถกำหนด การเปลี่ยนแปลงรูปภาพที่จะเรียกมาใช้งานได้
public_id - ระบุชื่อของรูปภาพนั้นๆ
format - กำหนด format ที่จะเรียก

เมื่อเรียกใช้งานรูปแล้วจะได้ URL ประมาณนี้
นี้คือรูปต้นแบบ

https://res.cloudinary.com/demo/image/upload/sample.jpg

นี้คือรูปที่ถูกดัดแปลงแล้ว ผ่าน transformations ใน URL

https://res.cloudinary.com/demo/image/upload/w_300,h_200,c_crop/sample.jpg

จะได้ออกมาแบบนี้

ลูกเล่น การ Transformation ยังมีอีกมาก โดย สามารถศึกษาเพิ่มได้จาก https://cloudinary.com/documentation/image_transformations

Cloudinary ยังมี SDKs อีกมากมายและใช้งานง่ายให้เลือกใช้

โดยสามารถเข้าไปดูเอกสารคู่มือการใช้งานได้เลยจาก list นี้

และแน่นอนว่า มีทั้งฟรีและเสียตัง

โดยจะมี เรทราคาตามรูปภาพด้านล่าง

ในความคิด การใช้งานฟรี สำหรับเว็บไซต์ไม่ใหญ่มาก ก็น่าจะไม่ต้องอัพเกรดเพิ่มให้เสียตัง ถ้ารู้จักจัดการดีๆ

1 Transformations จะเกิดจาก การอัปโหลด ,การเรียกใช้งาน หรือ การเปลี่ยนแปลงครั้งแรก จาก CDN
ส่วนครั้งต่อไป ถ้า Cached อยู่ใน CDN จะไม่ถูกนับว่าเป็น Transformations

ขอให้สรุปอีกครั้งแบบสั้น ๆ

เป็นตัวช่วยในการจัดการสื่อรูปภาพและวีดีโอบนเว็บเราได้ดี
มีการใช้งานที่ง่ายมากๆ
ช่วยลดเวลาในการพัฒนาเว็บได้มาก
ช่วยลดปัญหาเรื่องไฟล์รูปหลายขนาด
เหมาะสำหรับเว็บไซต์ที่สามารถควบคุม เนื้อหาได้เอง เช่น เว็บขายของออนไลน์ เว็บข่าวสาร เป็นต้น
สามารถใช้งานได้ฟรี ในระดับหนึ่ง

สุดท้ายนี้ถ้าอยากลองใช้ก็ต้องสมัคร Account ของ Cloudinary ก่อน
รออะไร คลิก สมัคร แล้วไปลองได้เลย

อ้างอิงจาก
- https://cloudinary.com/documentation