Membuat Tool Online Converter

Online converter adalah salah satu tools yang paling banyak digunakan di internet. Dengan JavaScript modern, kita bisa membuat converter berjalan sepenuhnya di browser tanpa server (serverless). Ini membuat proses konversi:

• Lebih cepat
• Aman (file tidak di-upload ke server)
• Kompatibel untuk gambar, teks, dan JSON

1. Struktur Dasar Tool Converter

/project-folder
  converter.html
  css/converter.css
  js/converter.js

2. Membuat UI Upload File

<input type="file" id="fileInput" onchange="handleFile()" />
<button onclick="downloadFile()">Download Hasil</button>

<pre id="output"></pre>

3. Converter Format Gambar (PNG → JPG)

// converter.js
function convertImageToJpg(file) {
  return new Promise((resolve) => {
    const img = new Image();
    img.onload = () => {
      const canvas = document.createElement("canvas");
      canvas.width = img.width;
      canvas.height = img.height;

      const ctx = canvas.getContext("2d");
      ctx.drawImage(img, 0, 0);

      canvas.toBlob((blob) => resolve(blob), "image/jpeg", 0.9);
    };
    img.src = URL.createObjectURL(file);
  });
}

4. Converter Teks → Base64

function textToBase64(text) {
  return btoa(text);
}

5. Converter JSON → CSV

function jsonToCsv(json) {
  const arr = JSON.parse(json);
  const header = Object.keys(arr[0]).join(",");
  const body = arr.map((item) => Object.values(item).join(",")).join("\n");
  return header + "\n" + body;
}

6. Menampilkan Output ke UI

function handleFile() {
  const file = document.getElementById("fileInput").files[0];
  document.getElementById("output").innerText = "File diproses...";
}

7. Fitur Download Hasil

function download(resultBlob, fileName) {
  const url = URL.createObjectURL(resultBlob);
  const a = document.createElement("a");
  a.href = url;
  a.download = fileName;
  a.click();
}

8. Best Practice Tool Converter

• Gunakan worker thread untuk file besar
• Gunakan drag & drop agar UX lebih modern
• Berikan preview hasil untuk gambar
• Gunakan compressing optional untuk file besar

Dengan JavaScript modern, Anda dapat membuat online converter yang cepat, aman, dan powerful tanpa backend. Tools seperti ini sangat cocok dimasukkan ke dalam platform UMKM, productivity tools, atau website utility Anda.