Fitur Brat Terbaru 2025

Membuat Converter Teks ke Gambar dengan Brat Generator

Brat adalah sebuah solusi untuk mengonversi teks menjadi gambar. Dalam artikel ini, kita akan membahas cara membuat sebuah generator teks ke gambar menggunakan JavaScript dengan bantuan library Canvas dan Jimp. Brat dapat digunakan untuk menghasilkan gambar dengan teks yang diformat secara otomatis agar muat dalam area gambar tertentu.

Apa itu Brat Generator?

Brat Generator adalah sebuah fungsi yang menerima teks sebagai input dan menghasilkan gambar dengan teks tersebut. Selain itu, gambar yang dihasilkan memiliki efek buram untuk memberikan tampilan yang lebih estetis.

Langkah-Langkah Implementasi

Berikut adalah langkah-langkah untuk membuat Brat Generator:

1. Instalasi Dependensi Kita memerlukan dua library utama:

Canvas: Untuk menggambar teks pada canvas.

Jimp: Untuk memproses efek buram pada gambar.

Instalasi dapat dilakukan dengan perintah berikut:

npm install canvas jimp

2. Kode Brat Generator Berikut adalah implementasi fungsi BratGenerator:

let { createCanvas } = require("canvas");
let Jimp = require("jimp");

async function BratGenerator(teks) {
  let width = 512;
  let height = 512;
  let margin = 20;
  let wordSpacing = 50;

  let canvas = createCanvas(width, height);
  let ctx = canvas.getContext("2d");

  ctx.fillStyle = "white";
  ctx.fillRect(0, 0, width, height);

  let fontSize = 80;
  let lineHeightMultiplier = 1.3;

  ctx.textAlign = "left";
  ctx.textBaseline = "top";
  ctx.fillStyle = "black";

  let words = teks.split(" ");
  let lines = [];

  let rebuildLines = () => {
    lines = [];
    let currentLine = "";

    for (let word of words) {
      let testLine = currentLine ? `${currentLine} ${word}` : word;
      let lineWidth =
        ctx.measureText(testLine).width +
        (currentLine.split(" ").length - 1) * wordSpacing;

      if (lineWidth < width - 2 * margin) {
        currentLine = testLine;
      } else {
        lines.push(currentLine);
        currentLine = word;
      }
    }

    if (currentLine) {
      lines.push(currentLine);
    }
  };

  ctx.font = `${fontSize}px Sans-serif`;
  rebuildLines();

  while (lines.length * fontSize * lineHeightMultiplier > height - 2 * margin) {
    fontSize -= 2;
    ctx.font = `${fontSize}px Sans-serif`;
    rebuildLines();
  }

  let lineHeight = fontSize * lineHeightMultiplier;
  let y = margin;

  for (let line of lines) {
    let wordsInLine = line.split(" ");
    let x = margin;

    for (let word of wordsInLine) {
      ctx.fillText(word, x, y);
      x += ctx.measureText(word).width + wordSpacing;
    }

    y += lineHeight;
  }

  let buffer = canvas.toBuffer("image/png");
  let image = await Jimp.read(buffer);

  image.blur(3);
  let blurredBuffer = await image.getBufferAsync(Jimp.MIME_PNG);

  return blurredBuffer;
}

module.exports = BratGenerator;

Penjelasan Kode

1. Canvas Initialization Membuat canvas dengan dimensi 512x512 piksel, di mana teks akan digambar.

2. Pengaturan Font dan Teks Menggunakan metode ctx.font untuk menentukan ukuran font, dan algoritma untuk memisahkan teks menjadi baris-baris agar pas di dalam canvas.

3. Efek Buram Setelah teks selesai digambar, buffer dari canvas diubah menjadi gambar dan diberikan efek buram menggunakan Jimp.blur.

4. Menghasilkan Buffer Gambar Gambar akhir disimpan dalam bentuk buffer, sehingga bisa digunakan untuk disimpan atau dikirim melalui API.

Cara Penggunaan

Fungsi ini dapat digunakan di proyek Node.js seperti berikut:

const fs = require("fs");
const BratGenerator = require("./BratGenerator");

(async () => {
  let teks = "Ini adalah contoh teks untuk Brat Generator.";
  let hasil = await BratGenerator(teks);

  fs.writeFileSync("output.png", hasil);
  console.log("Gambar berhasil dibuat: output.png");
})();

Hasil Akhir

Setelah menjalankan kode di atas, Anda akan mendapatkan file output.png yang berisi teks yang sudah diformat ke dalam gambar dengan efek buram.

Kesimpulan

Brat Generator adalah solusi sederhana namun efektif untuk mengonversi teks ke gambar. Dengan memanfaatkan Canvas untuk menggambar dan Jimp untuk memproses gambar, Anda dapat menghasilkan gambar teks yang indah dan siap digunakan untuk berbagai keperluan.

Creator: Axel
Sumber: https://github.com/AxellNetwork