Bạn đang xây dựng một ứng dụng web và bạn cần cho phép người dùng tải lên hình ảnh. Nhưng có một điều kiện: bạn cần tất cả hình ảnh đều phải ở định dạng JPEG để đảm bảo tính nhất quán và hiệu suất. Làm thế nào bạn có thể chuyển đổi hình ảnh do người dùng tải lên thành JPEG ngay lập tức?
Trong hướng dẫn này, chúng ta sẽ khám phá cách thiết lập một máy chủ backend sử dụng Node.js và Express.js để chuyển đổi hình ảnh sang định dạng JPEG. Chúng ta sẽ sử dụng thư viện mạnh mẽ Sharp để xử lý hình ảnh và chứng minh cách xử lý các yêu cầu chuyển đổi hình ảnh từ một khách hàng front-end hoặc công cụ quản lý API như Apidog.
Điều kiện tiên quyết:
Trước khi bắt đầu, hãy đảm bảo bạn đã cài đặt Node.js và npm (Node Package Manager) trên hệ thống của bạn. Bạn có thể tải xuống và cài đặt chúng từ trang web chính thức của Node.js.
Thiết lập Backend;
Hãy bắt đầu bằng cách tạo một thư mục mới cho dự án của chúng ta và khởi tạo npm.
mkdir image-conversion-backend
cd image-conversion-backend
npm init -y
Tiếp theo, cài đặt các phụ thuộc cần thiết: Express, Cors, Multer, và Sharp.
npm install express cors multer sharp
Với các phụ thuộc đã được cài đặt, hãy tạo một tệp index.js nơi chúng ta sẽ định nghĩa máy chủ Express của mình.
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;
// Cấu hình Multer để xử lý các tệp tải lên
const storage = multer.memoryStorage();
const upload = multer({ storage: storage });
// Bật Chia sẻ Tài nguyên Gốc (CORS)
app.use(cors());
// Phân tích nội dung JSON
app.use(express.json());
// Định nghĩa tuyến đường cho việc chuyển đổi hình ảnh
app.post('/convert', upload.single('image'), async (req, res) => {
try {
// Sử dụng Sharp để chuyển đổi hình ảnh đã tải lên sang định dạng JPEG
const buffer = await sharp(req.file.buffer).toFormat('jpg').toBuffer();
// Gửi hình ảnh đã chuyển đổi dưới dạng phản hồi
res.send(buffer);
} catch (error) {
console.error('Lỗi chuyển đổi:', error);
res.status(500).send('Chuyển đổi không thành công');
}
});
// Khởi động máy chủ
app.listen(port, () => {
console.log(`Máy chủ đang chạy trên cổng ${port}`);
});
Hiểu về mã nguồn;
Hãy phân tích các thành phần chính của ứng dụng backend của chúng ta:
- Khởi tạo Express: Chúng ta khởi tạo một ứng dụng Express và định nghĩa số cổng cho máy chủ của chúng ta.
- Cấu hình Multer: Multer được cấu hình để xử lý tải tệp. Trong trường hợp của chúng ta, chúng ta đang sử dụng
memoryStorage()để lưu trữ tệp đã tải lên trong bộ nhớ. - Middleware CORS: Chia sẻ Tài nguyên Gốc (CORS) được bật để cho phép các yêu cầu từ một khách hàng front-end chạy trên
http://localhost:3000. - Tuyến đường chuyển đổi hình ảnh: Chúng ta định nghĩa một tuyến đường POST
/convertnơi thực hiện việc chuyển đổi hình ảnh. Middleware Multer xử lý việc tải tệp, và thư viện Sharp được sử dụng để chuyển đổi hình ảnh sang định dạng JPEG. - Xử lý lỗi: Chúng ta bọc logic chuyển đổi trong một khối try-catch để xử lý bất kỳ lỗi nào có thể xảy ra trong quá trình chuyển đổi.
- Khởi động máy chủ: Cuối cùng, chúng ta khởi động máy chủ Express, mà lắng nghe trên cổng đã chỉ định.
Chạy máy chủ Backend
Để chạy máy chủ backend, hãy điều hướng đến thư mục dự án của bạn trong terminal và thực hiện lệnh sau:
node index.js
Máy chủ backend của bạn hiện đã hoạt động, sẵn sàng để xử lý các yêu cầu chuyển đổi hình ảnh.
Bây giờ, bạn có thể sử dụng một công cụ frontend như react, vue.js hoặc thậm chí phương pháp Fetch của vanilla js để gửi một yêu cầu từ frontend đến máy chủ để kiểm tra. Điều đó sẽ hoạt động. Trong hướng dẫn này, như tôi đã đề cập trước đó, chúng ta sẽ sử dụng Apidog.
Bắt đầu với Apidog
Đối với những ai chưa biết Apidog là gì, Apidog là một nền tảng hợp tác tích hợp cho tài liệu API, gỡ lỗi API, giả lập API và kiểm tra tự động API. Đối với những ai đã nghe nói hoặc đã sử dụng Postman trước đây, Apidog cung cấp nhiều hơn Postman, do đó làm cho nó trở thành công cụ quản lý API lý tưởng để kiểm tra các API của bạn.
Bạn có thể sử dụng liên kết trên để tải xuống, hoặc tạo một tài khoản để bắt đầu. Sau khi tài khoản của bạn đã được tạo, bước tiếp theo là gửi một yêu cầu POST đến máy chủ backend đang hoạt động của bạn để chuyển đổi hình ảnh sang jpeg.
Khi bạn tạo một tài khoản trên Apidog, một nhóm/không gian làm việc mới sẽ tự động được tạo cho bạn. Bạn có thể tạo các dự án, hoặc tiếp tục với dự án mặc định được tạo cho bạn. Trong ví dụ này, tôi sẽ sử dụng dự án đã được tạo sẵn và tạo một yêu cầu mới để thử nghiệm mã backend của chúng ta.
Khi bạn nhấp vào nút yêu cầu đó, bạn sẽ được hiển thị một giao diện để gửi yêu cầu đầu tiên của mình.
Điều đầu tiên cần làm là thay đổi loại yêu cầu từ GET thành POST. Cập nhật URL với URL của máy chủ cục bộ - localhost:8080 trong trường hợp của tôi.
Tiếp theo, nhấp vào phần "Body" và chọn dữ liệu form. Bằng cách chọn dữ liệu form, bạn sẽ có thể chọn và tải lên hình ảnh trực tiếp đến Apidog để kiểm tra việc chuyển đổi. Bây giờ hãy đặt tên cho dữ liệu form là "Image", kiểu là "file", & tải lên hình ảnh để chuyển đổi.
Sau khi hoàn tất, nhấp vào nút Gửi ở góc trên bên phải để gửi yêu cầu. Nếu mọi thứ diễn ra suôn sẻ, bạn sẽ thấy phản hồi 200 và tệp để tải xuống.
Điều quan trọng là lưu ý rằng khi bạn tải xuống tệp, bạn sẽ thấy một tệp response.bin. Khi bạn xem thuộc tính, bạn sẽ thấy đó là tệp .jpg. Và đó là hình ảnh đã chuyển đổi của bạn.
Kết luận
Chúng ta vừa thấy cách chuyển đổi hình ảnh từ .png hoặc bất kỳ định dạng nào khác sang .jpeg bằng cách sử dụng node.js và sau đó kiểm tra mọi thứ bằng Apidog.
Apidog đã cung cấp cho chúng ta khả năng và sự linh hoạt để thử nghiệm API mà không cần dựa vào bất kỳ công cụ hoặc framework front-end nào.