การแปลงรูปภาพเป็น JPEG โดยใช้ Node.js และ Apidog

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

ในบทช่วยสอนนี้ เราจะสำรวจวิธีการตั้งค่าเซิร์ฟเวอร์แบ็กเอนด์โดยใช้ Node.js และ Express.js เพื่อแปลงรูปภาพเป็นรูปแบบ JPEG เราจะใช้ไลบรารี Sharp ที่ทรงพลังสำหรับการประมวลผลรูปภาพและสาธิตวิธีการจัดการคำขอแปลงรูปภาพจากไคลเอนต์ฟรอนต์เอนด์หรือเครื่องมือจัดการ API เช่น Apidog

ข้อกำหนดเบื้องต้น:

ก่อนเริ่มต้น ตรวจสอบให้แน่ใจว่าคุณได้ติดตั้ง Node.js และ npm (Node Package Manager) บนระบบของคุณแล้ว คุณสามารถดาวน์โหลดและติดตั้งได้จากเว็บไซต์ Node.js อย่างเป็นทางการ

การตั้งค่าแบ็กเอนด์

มาเริ่มต้นด้วยการสร้างโฟลเดอร์ใหม่สำหรับโปรเจกต์ของเราและเริ่มต้น npm กัน

mkdir image-conversion-backend
cd image-conversion-backend
npm init -y

ถัดไป ติดตั้งการพึ่งพาที่จำเป็น: Express, Cors, Multer และ Sharp

npm install express cors multer sharp

เมื่อติดตั้งการพึ่งพาแล้ว มาสร้างไฟล์ index.js ที่เราจะกำหนดเซิร์ฟเวอร์ Express ของเรา

const cors = require("cors");
const express = require('express');
const multer = require('multer');
const sharp = require('sharp');

const app = express();
const port = process.env.PORT || 8080;

// Configure Multer to handle file uploads
const storage = multer.memoryStorage();
const upload = multer({ storage: storage });

// Enable Cross-Origin Resource Sharing (CORS)
app.use(cors());

// Parse JSON bodies
app.use(express.json());

// Define route for image conversion
app.post('/convert', upload.single('image'), async (req, res) => {
    try {
        // Use Sharp to convert the uploaded image to JPEG format
        const buffer = await sharp(req.file.buffer).toFormat('jpg').toBuffer();

        // Send the converted image as the response
        res.send(buffer);
    } catch (error) {
        console.error('Conversion error:', error);
        res.status(500).send('Conversion failed');
    }
});

// Start the server
app.listen(port, () => {
    console.log(`Server is running on port ${port}`);
});

การทำความเข้าใจโค้ด

มาทำความเข้าใจส่วนประกอบหลักของแอปพลิเคชันแบ็กเอนด์ของเรากัน:

• Express Initialization: เราเริ่มต้นแอปพลิเคชัน Express และกำหนดหมายเลขพอร์ตสำหรับเซิร์ฟเวอร์ของเรา
• Multer Configuration: Multer ได้รับการกำหนดค่าให้จัดการการอัปโหลดไฟล์ ในกรณีของเรา เราใช้ memoryStorage() เพื่อจัดเก็บไฟล์ที่อัปโหลดในหน่วยความจำ
• CORS Middleware: Cross-Origin Resource Sharing (CORS) เปิดใช้งานเพื่ออนุญาตคำขอจากไคลเอนต์ฟรอนต์เอนด์ที่ทำงานบน http://localhost:3000
• Image Conversion Route: เรากำหนดเส้นทาง POST /convert ซึ่งการแปลงรูปภาพเกิดขึ้น มิดเดิลแวร์ Multer จัดการการอัปโหลดไฟล์ และไลบรารี Sharp ใช้เพื่อแปลงรูปภาพเป็นรูปแบบ JPEG
• Error Handling: เราห่อตรรกะการแปลงไว้ในบล็อก try-catch เพื่อจัดการข้อผิดพลาดที่อาจเกิดขึ้นระหว่างกระบวนการแปลง
• Server Start: สุดท้าย เราเริ่มต้นเซิร์ฟเวอร์ Express ซึ่งรับฟังบนพอร์ตที่ระบุ

การเรียกใช้เซิร์ฟเวอร์แบ็กเอนด์

ในการเรียกใช้เซิร์ฟเวอร์แบ็กเอนด์ ให้ไปที่ไดเรกทอรีโปรเจกต์ของคุณในเทอร์มินัลและเรียกใช้คำสั่งต่อไปนี้:

node index.js

เซิร์ฟเวอร์แบ็กเอนด์ของคุณพร้อมใช้งานและทำงานอยู่ พร้อมที่จะจัดการคำขอแปลงรูปภาพแล้ว

ตอนนี้ คุณสามารถใช้เครื่องมือฟรอนต์เอนด์ เช่น react, vue.js หรือแม้แต่วิธีการ Fetch ของ vanilla js เพื่อส่งคำขอจากฟรอนต์เอนด์ไปยังเซิร์ฟเวอร์เพื่อทดสอบสิ่งต่างๆ ได้ ซึ่งควรใช้งานได้ ในคู่มือนี้ อย่างไรก็ตาม ดังที่ฉันได้กล่าวไว้ก่อนหน้านี้ เราจะใช้ Apidog

เริ่มต้นใช้งาน Apidog

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

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

เมื่อคุณสร้างบัญชีบน Apidog ทีม/พื้นที่ทำงานใหม่จะถูกสร้างขึ้นโดยอัตโนมัติสำหรับคุณ คุณสามารถสร้างโปรเจกต์หรือดำเนินการต่อด้วยโปรเจกต์เริ่มต้นที่สร้างขึ้นสำหรับคุณ ในตัวอย่างนี้ ฉันจะใช้โปรเจกต์ที่สร้างขึ้นแล้วและสร้างคำขอใหม่เพื่อลองใช้โค้ดแบ็กเอนด์ของเรา

เมื่อคุณคลิกที่ปุ่มคำขอนั้น คุณจะเห็นอินเทอร์เฟซเพื่อส่งคำขอแรกของคุณ

สิ่งแรกที่ต้องทำคือเปลี่ยนประเภทคำขอจาก GET เป็น POST อัปเดต URL ด้วย URL ของเซิร์ฟเวอร์ในเครื่อง - localhost:8080 ในกรณีของฉัน

ถัดจากนั้นคือคลิกที่ส่วน "Body" และเลือกข้อมูลแบบฟอร์ม ด้วยการเลือกข้อมูลแบบฟอร์ม คุณจะสามารถเลือกและอัปโหลดรูปภาพโดยตรงไปยัง Apidog เพื่อทดสอบการแปลง ตอนนี้ให้ข้อมูลแบบฟอร์มชื่อ "Image" พิมพ์ "file" & อัปโหลดรูปภาพเพื่อแปลง

เมื่อเสร็จแล้ว ให้คลิกปุ่ม Send ที่ด้านบนขวาเพื่อส่งคำขอ หากทุกอย่างเป็นไปด้วยดี คุณควรจะเห็นการตอบสนอง 200 และไฟล์ให้ดาวน์โหลด

สิ่งสำคัญคือต้องทราบว่าเมื่อคุณดาวน์โหลดไฟล์ คุณจะเห็นไฟล์ response.bin เมื่อคุณดูคุณสมบัติ คุณจะพบว่าเป็นไฟล์ .jpg และนั่นคือรูปภาพที่คุณแปลงแล้ว

บทสรุป

เราเพิ่งเห็นวิธีการแปลงรูปภาพจาก .png หรือรูปแบบอื่นๆ เป็น .jpeg โดยใช้ node.js จากนั้นทดสอบสิ่งต่างๆ ด้วย Apidog

Apidog ทำให้เรามีความสามารถและความยืดหยุ่นในการทดสอบ API โดยไม่ต้องพึ่งพาเครื่องมือหรือเฟรมเวิร์กฟรอนต์เอนด์ใดๆ