Lewati ke konten
Toolars
Jelajahi
Laporkan bug

Pengembang · utilitas Lokal

Kode ke Gambar

Code to Image Converter

Ekspor kode JavaScript, TypeScript, HTML, CSS, JSON, atau Bash berwarna sintaks sebagai SVG atau PNG dengan tema, nomor baris, dan judul jendela pilihan.

Jalur tugas / dari masukan ke hasil

Tempel kode Anda

Berjalan lokal · Tidak ada yang diunggah

Cara kerja Kode ke Gambar, privasi, dan alat terkait

Jalur tugas / dari masukan ke hasil

Cara mengubah kode menjadi gambar yang siap dibagikan

  1. 01

    Tempel kode Anda

    Ketik atau tempel ke kolom Sumber kode — hingga 65.536 byte UTF-8, maksimal 200 baris dan 240 karakter per baris. Penghitung di samping label menunjukkan jumlah byte saat ini terhadap batasnya, dan apa pun yang melampaui batas ditolak dengan pesan yang menyebutkannya, jadi Anda tahu persis apa yang harus dipangkas.

  2. 02

    Pilih bahasa dan tema

    Pilih JavaScript, TypeScript, HTML, CSS, JSON, atau Bash di bawah Bahasa, lalu atur Tema ke Terang atau Gelap. Warna sintaks berasal dari tata bahasa Shiki yang sesuai dan tema bergaya GitHub, dan Muat contoh mengisi kolom dengan contoh singkat dalam bahasa yang dipilih agar Anda bisa membandingkan tampilan sebelum menempel kode sendiri.

  3. 03

    Rancang bingkainya

    Atur warna Latar belakang, Padding dari 16 hingga 96 px, dan Ukuran font dari 12 hingga 28 px, lalu tambahkan Judul jendela hingga 80 karakter, aktifkan atau nonaktifkan Tampilkan nomor baris, dan pilih Skala ekspor 1x atau 2x. Tinggi baris mengikuti ukuran font secara otomatis, jadi huruf besar tetap terbaca tanpa penyetelan ekstra.

  4. 04

    Buat pratinjau

    Pembuatan memuat tokenizer lokal, mengukur font dan judul jendela sebenarnya, lalu menampilkan SVG yang sudah di-escape dan juga digunakan untuk ekspor. Kode tetap berupa teks tanpa dijalankan. Edit menghapus pratinjau lama. Keluaran yang terlalu besar atau tidak dapat diukur ditolak; pratinjau lebar dapat digulir dengan keyboard.

  5. 05

    Unduh SVG atau PNG

    Gunakan Unduh SVG untuk file vektor yang dapat diskalakan, atau Unduh PNG untuk bitmap yang dirender melalui Canvas pada skala pilihan. Kedua file diproduksi secara lokal, dan jika kombinasi yang dipilih melampaui ukuran ekspor yang aman, ruang kerja memberitahukannya alih-alih menulis file yang rusak.

Fakta alat

Pemrosesan
Di browser Anda
Input meninggalkan perangkat
Tidak pernah
Retensi
Tidak ada yang disimpan
Harga
Gratis

Masukan Anda tetap di peramban.

Kode ke Gambar menggunakan jalur eksekusi lokal terverifikasinya dan tidak membuat riwayat masukan atau keluaran tersembunyi.

Eksekusi lokal

Berjalan di dalam tab peramban saat ini.

Tanpa pemrosesan tersembunyi

Data alat aktif tidak pernah menjadi catatan dokumen Toolars.

Tanpa perlu akun

Gunakan alur kerja inti tanpa membuat profil. Favorit disinkronkan ke akun Anda setelah masuk.

Atur ulang seketika

Bersihkan tab dan data kerja aktif pun hilang.

Kapan Kode ke Gambar berguna

Ekspor cuplikan dua baris

Tempel dua baris: const total = 2 + 3; dan console.log(total); (40 byte UTF-8). Pilih JavaScript, Gelap, latar #111827, padding 64 px, font 16 px, nomor baris aktif, judul sum.js, dan 1×. Dalam uji browser lokal 2026-09-24, pembuatan pratinjau lalu unduh PNG menghasilkan toolars-code-image.png, 406 × 270 piksel dan 12.784 byte. Gambar menampilkan kode, bukan menjalankannya.

Bandingkan 1×, 2×, dan SVG

Pertahankan kode dan setelan, pilih 2×, buat ulang pratinjau, lalu unduh PNG. Berkas 2026-09-24 berukuran 812 × 540 piksel dan 31.366 byte. Pada 1×, unduhan SVG toolars-code-image.svg berukuran 1.647 byte dengan viewBox 406 × 270. Skala mengubah piksel PNG, bukan kode; ukuran dan byte dapat berubah menurut font dan browser. SVG tanpa font tertanam dapat tampak berbeda.

Pulih dari sumber kosong

Kosongkan Sumber kode lalu buat pratinjau. Ruang kerja meminta kode dan menonaktifkan kedua unduhan. Tempel ulang dua baris tadi dan buat pratinjau lagi; perubahan menghapus pratinjau lama. Jika ekspor melewati 4.096 piksel per sisi, coba 1× atau kurangi padding dan font.

Apa yang sebenarnya dilakukan Kode ke Gambar

Fungsi yang Anda banggakan layak tampil di catatan rilis; cuplikan yang sulit dipecahkan pas mengilustrasikan wiki internal; slide konferensi membutuhkan fragmen bergaya, bukan tangkapan layar dengan tab terpotong. Kode ke Gambar mengubah cuplikan menjadi bingkai rapi dengan nomor baris dan judul jendela, dan SVG atau PNG yang diekspor langsung masuk ke slide, dokumen, dan obrolan tanpa bersih-bersih manual. Karena tokenisasi serta rendering terjadi di tab ini, kode sumber yang belum dirilis tidak pergi ke mana-mana.

Pertanyaan umum

Bagaimana membuat gambar JavaScript untuk slide?
Masukkan const total = 2 + 3;, pilih JavaScript, tema terang dan 1x. Buat pratinjau lalu unduh PNG. Gambar menampilkan kode, bukan hasil 5: alat ini tidak menjalankan kode. Untuk bitmap lebih besar, pilih 2x dan buat ulang; lebar dan tingginya menjadi dua kali lipat.
Bagaimana mengekspor contoh JSON sebagai SVG?
Masukkan {"ok":true}, pilih JSON dan buat pratinjau. Unduh SVG untuk ilustrasi kode yang dapat diskalakan atau PNG untuk mempertahankan tampilan hasil render. Setelah mengedit teks, buat ulang karena pratinjau lama dihapus. Ini ekspor gambar, bukan hasil validasi JSON.
Apa saja batas masukannya?
Hingga 65.536 byte UTF-8 kode, maksimal 200 baris dengan tidak lebih dari 240 karakter per baris, dan judul jendela maksimal 80 karakter. Ekspornya sendiri dibatasi hingga 4.096 piksel per sisi dan 16.777.216 piksel total; apa pun yang melampaui batas ini ditolak dengan pesan yang spesifik.
Apakah kode saya diunggah atau dieksekusi?
Tidak keduanya. Tokenizer Shiki dimuat di dalam tab ini hanya saat Anda menekan Buat pratinjau, pratinjau dibangun dari token teks alih-alih HTML yang disuntikkan, dan sumber tidak pernah dikirim ke mana pun atau disimpan setelah ruang kerja dibersihkan.
Bahasa dan tema apa saja yang tersedia?
Enam bahasa — JavaScript, TypeScript, HTML, CSS, JSON, dan Bash — masing-masing ditokenisasi dengan tata bahasa Shiki-nya sendiri. Tema Terang dan Gelap adalah palet bergaya GitHub, dan kontrol warna Latar belakang menata bingkai di sekitar kartu secara terpisah dari tema yang Anda pilih.
Apa yang diubah oleh Skala ekspor?
1x memakai dimensi gambar yang diukur. 2x menggandakan lebar dan tinggi sehingga jumlah piksel PNG menjadi empat kali lipat; isi kode tidak berubah. Keduanya tetap tunduk pada batas ekspor. Turunkan skala jika hasil terlalu besar.
Haruskah saya mengunduh SVG atau PNG?
PNG mempertahankan piksel yang dirender di sini. SVG dapat diskalakan; tanpa font unggahan, SVG bergantung pada font sistem yang dapat berbeda di perangkat lain. Font unggahan yang lolos pemeriksaan disematkan seluruhnya, tetapi penampil tujuan juga harus mendukung font tertanam. Pilih PNG untuk tampilan yang konsisten.
Mengapa pratinjau menghilang setelah saya mengubah pengaturan?
Itu disengaja: setiap perubahan pada kode, bahasa, tema, latar belakang, padding, ukuran font, judul, nomor baris, atau skala membatalkan pratinjau lama alih-alih menampilkan gambar yang kedaluwarsa. Tekan Buat pratinjau lagi untuk merender bingkai yang diperbarui.
Font apa yang dapat disematkan?
TTF/OTF, maksimal 24 MiB. Pilih font yang boleh Anda sematkan. Mendukung font garis luar statis tanpa batasan penyematan; font variabel dan berwarna ditolak. Seluruh font disertakan dalam SVG. Karakter yang tidak tersedia menghentikan pembuatan. File tidak diunggah. Tanpa pilihan, SVG memakai font sistem.

Baca juga

Lanjutkan di Pengembang

Tugas terkait, bukan jalan buntu.

Pindah ke ruang kerja terfokus lainnya tanpa kembali ke indeks lengkap.

Generator Slug URL

URL Slug Generator

Ubah judul menjadi slug URL huruf kecil: aksen dihilangkan, & menjadi and, pemisah tanda hubung atau garis bawah; aksara non-Latin tetap utuh.

Buat

Generator Bayangan React Native

React Native Shadow Generator

Setel bayangan iOS dan elevation Android sambil membandingkan pratinjau langsung, lalu salin cuplikan StyleSheet TypeScript, termasuk mode boxShadow baru.

Buat

Enkode/Dekode Base64

Base64 Encoder/Decoder

Enkode atau dekode Base64 dengan opsi UTF-8, URL-safe, dan baris baru, divalidasi langsung di peramban — tombol Tukar memudahkan pemeriksaan pulang-pergi.

Konversi

Enkode/Dekode HTML

HTML Encoder/Decoder

Escape lima karakter perusak markup menjadi entitas HTML, atau urai referensi bernama dan numerik kembali lewat parser peramban, semuanya secara lokal.

Konversi