Mengonversi Gambar ke JPEG menggunakan Node.js & Apidog

Anda sedang membangun aplikasi web dan Anda perlu mengizinkan pengguna untuk mengunggah gambar. Tetapi ada kendala: Anda memerlukan semua gambar dalam format JPEG untuk alasan konsistensi dan kinerja. Bagaimana Anda dapat mengonversi gambar yang diunggah pengguna ke JPEG secara langsung?

Dalam tutorial ini, kita akan menjelajahi cara menyiapkan server backend menggunakan Node.js dan Express.js untuk mengonversi gambar ke format JPEG. Kita akan memanfaatkan pustaka Sharp yang kuat untuk pemrosesan gambar dan mendemonstrasikan cara menangani permintaan konversi gambar dari klien front-end atau alat manajemen API seperti Apidog.

Prasyarat:

Sebelum memulai, pastikan Anda telah menginstal Node.js dan npm (Node Package Manager) di sistem Anda. Anda dapat mengunduh dan menginstalnya dari situs web resmi Node.js.

Menyiapkan Backend;

Mari kita mulai dengan membuat folder baru untuk proyek kita dan menginisialisasi npm.

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

Selanjutnya, instal dependensi yang diperlukan: Express, Cors, Multer, dan Sharp.

npm install express cors multer sharp

Dengan dependensi yang terinstal, mari kita buat file index.js tempat kita akan mendefinisikan server Express kita.

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}`);
});

Memahami Kode;

Mari kita uraikan komponen kunci dari aplikasi backend kita:

• Inisialisasi Express: Kita menginisialisasi aplikasi Express dan mendefinisikan nomor port untuk server kita.
• Konfigurasi Multer: Multer dikonfigurasi untuk menangani unggahan file. Dalam kasus kita, kita menggunakan memoryStorage() untuk menyimpan file yang diunggah dalam memori.
• Middleware CORS: Cross-Origin Resource Sharing (CORS) diaktifkan untuk mengizinkan permintaan dari klien front-end yang berjalan di http://localhost:3000.
• Rute Konversi Gambar: Kita mendefinisikan rute POST /convert tempat konversi gambar terjadi. Middleware Multer menangani unggahan file, dan pustaka Sharp digunakan untuk mengonversi gambar ke format JPEG.
• Penanganan Kesalahan: Kita membungkus logika konversi dalam blok try-catch untuk menangani kesalahan apa pun yang mungkin terjadi selama proses konversi.
• Mulai Server: Terakhir, kita memulai server Express, yang mendengarkan pada port yang ditentukan.

Menjalankan Server Backend

Untuk menjalankan server backend, navigasikan ke direktori proyek Anda di terminal dan jalankan perintah berikut:

node index.js

Server backend Anda sekarang aktif dan berjalan, siap untuk menangani permintaan konversi gambar.

Sekarang, Anda dapat menggunakan alat frontend seperti react, vue.js atau bahkan metode Fetch js vanilla untuk mengirim permintaan dari frontend ke server untuk menguji semuanya. Itu seharusnya berhasil. Namun, dalam panduan ini, seperti yang saya sebutkan sebelumnya, kita akan menggunakan Apidog.

Memulai dengan Apidog

Bagi kita yang tidak tahu apa itu Apidog, Apidog adalah platform kolaborasi terintegrasi untuk dokumentasi API, debugging API, mocking API, dan pengujian otomatis API. Bagi kita yang pernah mendengar atau menggunakan Postman sebelumnya, Apidog menawarkan lebih banyak daripada Postman sehingga menjadikannya alat manajemen API yang ideal untuk menguji API Anda.

Anda dapat menggunakan tautan di atas untuk mengunduh, atau membuat akun untuk memulai. Setelah akun Anda dibuat, langkah selanjutnya adalah mengirim permintaan POST ke server backend Anda yang sudah berjalan untuk mengonversi gambar ke jpeg.

Saat Anda membuat akun di Apidog, tim/ruang kerja baru secara otomatis dibuat untuk Anda. Anda dapat membuat proyek, atau melanjutkan dengan proyek default yang dibuat untuk Anda. Dalam contoh ini, saya akan menggunakan proyek yang sudah dibuat, dan membuat permintaan baru untuk mencoba kode backend kita.

Saat Anda mengklik tombol permintaan itu, Anda akan diperlihatkan antarmuka untuk mengirim permintaan pertama Anda.

Hal pertama yang harus dilakukan adalah mengubah jenis permintaan dari GET menjadi POST. Perbarui URL dengan URL server lokal - localhost:8080 dalam kasus saya.

Selanjutnya adalah mengklik bagian "Body", dan memilih data formulir. Dengan memilih data formulir, Anda akan dapat memilih dan mengunggah gambar langsung ke Apidog untuk menguji konversi. Sekarang beri nama data formulir "Image", ketik "file", & unggah gambar untuk dikonversi.

Setelah selesai, klik tombol Kirim di kanan atas untuk mengirim permintaan. Jika semuanya berjalan dengan baik, Anda seharusnya dapat melihat respons 200 dan file untuk diunduh.

Penting untuk dicatat bahwa saat Anda mengunduh file, Anda akan melihat file response.bin. Saat Anda melihat properti, Anda akan mengetahui bahwa itu adalah file .jpg. Dan itu adalah gambar Anda yang telah dikonversi.

Kesimpulan

Kita baru saja melihat cara mengonversi gambar dari .png atau format lain apa pun ke .jpeg menggunakan node.js dan kemudian menguji semuanya dengan Apidog.

Apidog memberi kita kemampuan dan fleksibilitas untuk menguji API tanpa bergantung pada alat atau kerangka kerja frontend apa pun.