imgsquash

สรุป

การบีบอัดภาพรหัสเว็บไซต์สแต็คเต็มรูปแบบ มีทั้ง API Service และ Frontend ที่เขียนใน Node, React และ Next.js Framework

ภาพหน้าจอ

การตั้งค่า Google Cloud Storage

1. สร้างโครงการบน Google Cloud และเพิ่มถังเก็บข้อมูลคลาวด์ฟรีผ่านคู่มือ QuickStart นี้:
   • https://cloud.google.com/storage/docs/quickstart-console
2. รับรองความถูกต้องโดยใช้เครื่องมือบรรทัดคำสั่ง gcloud (ดาวน์โหลดที่นี่) หรือตั้งค่าตัวแปร GOOGLE_APPLICATION_CREDENTIALS Env พร้อมไฟล์บัญชีบริการ
   • คำแนะนำที่นี่: https://cloud.google.com/sdk/docs/authorizing

เริ่มต้นบริการ API

1. สร้างไฟล์ .env ในรูทของโฟลเดอร์ด้วยตัวแปรต่อไปนี้ ดู dotenv เกี่ยวกับวิธีการเพิ่มตัวแปร env
   • API_VERSION : 1 (ไม่บังคับ)
   • GC_STORAGE : your-google-cloud-bucket-name
   • dl_base_url : [YOUR-API-URL]/1/dl
2. npm install เพื่อติดตั้งโมดูลโหนดทั้งหมดสำหรับ API
3. ทำ npm run dev เพื่อเริ่มเซิร์ฟเวอร์ dev บนพอร์ต 3000
4. npm start

เริ่มต้นส่วนหน้า

1. npm install เพื่อติดตั้งโมดูลโหนดทั้งหมดสำหรับส่วนหน้า
2. Do npm run dev จะเริ่มต้นเซิร์ฟเวอร์ WebPack บนพอร์ต 3001
3. ทำ npm run build และ npm start สร้างและใช้รหัสในการผลิต

หมายเหตุ

1. โปรแกรมต่อไปนี้ใช้สำหรับการเพิ่มประสิทธิภาพ

   • Mozjpeg (การบีบอัด JPEG Lossy)
   • JPEGTRAN (การบีบอัด JPEG ที่ไม่สูญเสีย)
   • pngquant (การบีบอัด PNG ที่สูญเสีย)
   • optipng (การบีบอัด PNG ที่ไม่สูญเสีย)

2. ขีด จำกัด การอัปโหลดขนาดไฟล์ปัจจุบันคือ 10MB

3. เส้นทาง API [โพสต์]

   • /image : อัพโหลดอิมเมจผ่านไฟล์, URL, Base64 หรือไบนารี
     • ไฟล์: file หรือ base64 หรือ binary
     • Lossy: Boolean (ค่าเริ่มต้น: เท็จ)
   • /url : URL ภาพการบีบอัดโดยตรง
     • URL: URL ภาพที่ถูกต้อง
   • /zip : ยอมรับรายการไฟล์ไฟล์เป็นอาร์เรย์ที่มี ( id , size และ name ) และส่งผลลัพธ์ซิป
     • ไฟล์: รายการไฟล์ไฟล์เป็นอาร์เรย์

   [GET] - /dl/:id : สร้าง URL ดาวน์โหลดของภาพบีบอัด ยอมรับ name แบบสอบถามเสริม

ใบอนุญาต

มิกซ์