Tool Online Generate Thumbnail Gratis

G enerator thumbnail adalah aplikasi berbasis HTML5 Canvas yang dirancang untuk memudahkan pembuatan thumbnail berkualitas tinggi langsung dari browser tanpa memerlukan software desain tambahan. Tool ini dapat dipasang pada Postingan atau Halaman Blogger karena dibuat menggunakan HTML, CSS, dan JavaScript murni tanpa framework maupun library, sehingga ringan, cepat, dan kompatibel

Melalui antarmuka yang sederhana, Anda dapat mengunggah foto utama, menambahkan overlay PNG, mengatur judul, subjudul, logo atau nama website, memilih rasio kanvas, mengubah font, ukuran, warna, serta posisi teks sesuai kebutuhan. Seluruh proses dilakukan secara real-time menggunakan HTML5 Canvas, kemudian hasil akhirnya dapat diekspor ke format WebP yang ringan dengan kualitas gambar tetap tajam sehingga ideal digunakan sebagai thumbnail artikel, blog, maupun media sosial.

/* ========================================= NTG (Ngelab Thumbnail Generator) Modern Dark Teal Theme ========================================= */

#ntg-app{ --ntg-primary:#007777; --ntg-primary-dark:#005d5d; --ntg-primary-light:#00a5a5; --ntg-bg:#0d0d0d; --ntg-bg2:#171717; --ntg-card:#1b1b1b; --ntg-text:#ffffff; --ntg-text2:#d7f3f3; --ntg-border:rgba(0,119,119,.35); --ntg-shadow:rgba(0,0,0,.45);

font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; width:100%; margin:20px auto; color:var(--ntg-text); line-height:1.5; box-sizing:border-box; }

#ntg-app *, #ntg-app *::before, #ntg-app *::after{ box-sizing:inherit; }

/* ========================================= Preview Area ========================================= */

#ntg-preview-area{ width:100%; padding:18px; margin-bottom:20px; border-radius:16px; overflow:hidden;

background: linear-gradient(135deg,#0f0f0f 0%,#181818 45%,#007777 100%);

border:1px solid var(--ntg-border);

box-shadow: 0 20px 45px rgba(0,0,0,.35), inset 0 1px rgba(255,255,255,.05); }

/* ========================================= Canvas ========================================= */

#ntg-canvas{ display:block; width:100%; height:auto; margin:auto; border-radius:10px;

border:2px solid var(--ntg-primary);

background:#ffffff;

background-image: linear-gradient(45deg,#ececec 25%,transparent 25%), linear-gradient(-45deg,#ececec 25%,transparent 25%), linear-gradient(45deg,transparent 75%,#ececec 75%), linear-gradient(-45deg,transparent 75%,#ececec 75%);

background-size:20px 20px; background-position:0 0,0 10px,10px -10px,-10px 0;

box-shadow: 0 15px 40px rgba(0,0,0,.45), 0 0 25px rgba(0,119,119,.20); }

/* ========================================= Controls ========================================= */

#ntg-controls-area{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; }

/* ========================================= Card ========================================= */

#ntg-app .ntg-control-group{

background: linear-gradient(180deg,#232323,#141414);

border:1px solid var(--ntg-border);

border-radius:14px;

padding:18px;

box-shadow: 0 10px 25px rgba(0,0,0,.25); }

/* ========================================= Group Title ========================================= */

#ntg-app .ntg-group-title{

margin:0 0 16px;

font-size:17px;

font-weight:700;

color:#ffffff;

padding-bottom:10px;

border-bottom:2px solid var(--ntg-primary); }

/* ========================================= Input Row ========================================= */

#ntg-app .ntg-input-row{ display:flex; flex-direction:column; margin-bottom:14px; }

#ntg-app .ntg-input-row:last-child{ margin-bottom:0; }

#ntg-app .ntg-input-row label{

margin-bottom:6px;

font-size:13px;

font-weight:600;

color:var(--ntg-text2); }

/* ========================================= Text Input ========================================= */

#ntg-app input[type=text], #ntg-app select{

width:100%;

padding:10px 12px;

color:#ffffff;

background:#1b1b1b;

border:1px solid var(--ntg-border);

border-radius:8px;

transition:.25s; }

#ntg-app input[type=text]:focus, #ntg-app select:focus{

outline:none;

border-color:var(--ntg-primary-light);

box-shadow: 0 0 0 3px rgba(0,119,119,.20); }

/* ========================================= File Input ========================================= */

#ntg-app input[type=file]{

color:#ffffff;

font-size:13px; }

#ntg-app input[type=file]::file-selector-button{

background:linear-gradient(135deg,#007777,#005b5b);

color:#fff;

border:none;

padding:8px 14px;

border-radius:6px;

cursor:pointer;

margin-right:10px; }

#ntg-app input[type=file]::file-selector-button:hover{

background:linear-gradient(135deg,#009999,#007777); }

/* ========================================= Color Picker ========================================= */

#ntg-app input[type=color]{

width:100%;

height:42px;

padding:3px;

background:#1b1b1b;

border:1px solid var(--ntg-border);

border-radius:8px;

cursor:pointer; }

/* ========================================= Range ========================================= */

#ntg-app input[type=range]{

width:100%;

accent-color:var(--ntg-primary);

cursor:pointer; }

/* ========================================= Export Area ========================================= */

#ntg-app .ntg-group-export{

grid-column:1/-1;

background:none;

border:none;

box-shadow:none;

padding:0;

display:flex;

justify-content:center; }

/* ========================================= Export Button ========================================= */

#ntg-export-btn{

width:100%;

max-width:420px;

padding:14px;

border:none;

border-radius:10px;

font-size:16px;

font-weight:700;

color:#ffffff;

cursor:pointer;

background: linear-gradient(135deg, #00a5a5, #007777, #004c4c);

box-shadow: 0 10px 30px rgba(0,119,119,.35);

transition:.25s; }

#ntg-export-btn:hover{

transform:translateY(-2px);

background: linear-gradient(135deg, #00c2c2, #008888, #005858);

box-shadow: 0 15px 35px rgba(0,119,119,.45); }

#ntg-export-btn:active{

transform:scale(.98); }

/* ========================================= Responsive ========================================= */

@media(max-width:768px){

#ntg-controls-area{

grid-template-columns:1fr; }

#ntg-preview-area{

padding:12px; } }

General Canvas Ratio: 16:9 (Landscape) 4:3 (Standard) 1:1 (Square)

Images Main Photo: Overlay (PNG):

Title Text: Position: Right Top Right Center Right Bottom Font: Arial Impact Verdana Georgia Courier New Size: Color:

Subtitle Text: Font: Arial Impact Verdana Georgia Courier New Size: Color:

Logo / Site Name Text: Position: Top Left Top Right Bottom Left Bottom Right Font: Arial Impact Verdana Georgia Courier New

Export WebP

(() => { 'use strict';

// ========================================== // 1. STATE MANAGEMENT // ========================================== const state = { ratio: '16:9', canvasWidth: 1280, canvasHeight: 720, photo: null, overlay: null, title: { text: '', font: 'Arial', size: 60, color: '#ffffff', pos: 'right-center' }, subtitle: { text: '', font: 'Arial', size: 30, color: '#cccccc' }, logo: { text: '', font: 'Arial', pos: 'top-left' } };

// ========================================== // 2. DOM ELEMENTS & KANVAS // ========================================== const canvas = document.getElementById('ntg-canvas'); const ctx = canvas.getContext('2d');

// General & Images Inputs const ratioSelect = document.getElementById('ntg-ratio'); const photoInput = document.getElementById('ntg-photo'); const overlayInput = document.getElementById('ntg-overlay');

// Title Inputs const titleText = document.getElementById('ntg-title-text'); const titlePos = document.getElementById('ntg-title-pos'); const titleFont = document.getElementById('ntg-title-font'); const titleSize = document.getElementById('ntg-title-size'); const titleColor = document.getElementById('ntg-title-color');

// Subtitle Inputs const subText = document.getElementById('ntg-sub-text'); const subFont = document.getElementById('ntg-sub-font'); const subSize = document.getElementById('ntg-sub-size'); const subColor = document.getElementById('ntg-sub-color');

// Logo Inputs const logoText = document.getElementById('ntg-logo-text'); const logoPos = document.getElementById('ntg-logo-pos'); const logoFont = document.getElementById('ntg-logo-font');

// ========================================== // 3. RENDERING ENGINE // ========================================== function render() { canvas.width = state.canvasWidth; canvas.height = state.canvasHeight;

// LAYER 1: Clear ctx.clearRect(0, 0, canvas.width, canvas.height);

// LAYER 2: Photo if (state.photo) { drawPhotoCover(); }

// LAYER 3: Overlay if (state.overlay) { ctx.drawImage(state.overlay, 0, 0, canvas.width, canvas.height); }

// Set pengaturan bayangan agar teks terbaca walau tanpa overlay ctx.shadowColor = 'rgba(0, 0, 0, 0.8)'; ctx.shadowBlur = 6; ctx.shadowOffsetX = 2; ctx.shadowOffsetY = 2;

// LAYER 4 & 5: Text Engine renderText();

// Reset shadow agar tidak mempengaruhi render foto di frame berikutnya ctx.shadowColor = 'transparent'; }

function drawPhotoCover() { const imgRatio = state.photo.width / state.photo.height; const canvasRatio = state.canvasWidth / state.canvasHeight; let drawWidth = state.canvasWidth; let drawHeight = state.canvasHeight; let offsetX = 0; let offsetY = 0;

if (imgRatio > canvasRatio) { drawWidth = state.canvasHeight * imgRatio; offsetX = (state.canvasWidth - drawWidth) / 2; } else { drawHeight = state.canvasWidth / imgRatio; offsetY = (state.canvasHeight - drawHeight) / 2; }

ctx.drawImage(state.photo, offsetX, offsetY, drawWidth, drawHeight); }

function renderText() { const padding = 60; // Jarak teks dari tepi kanvas ctx.textBaseline = 'top';

// --- LAYER 4: LOGO --- if (state.logo.text) { const logoFontSize = 35; // Ukuran statis untuk logo ctx.font = `bold ${logoFontSize}px ${state.logo.font}`; ctx.fillStyle = '#ffffff';

let logoX, logoY; // X Koordinat if (state.logo.pos.includes('left')) { logoX = padding; ctx.textAlign = 'left'; } else { logoX = state.canvasWidth - padding; ctx.textAlign = 'right'; }

// Y Koordinat if (state.logo.pos.includes('top')) { logoY = padding; } else { logoY = state.canvasHeight - padding - logoFontSize; }

ctx.fillText(state.logo.text, logoX, logoY); }

// --- LAYER 5: TITLE & SUBTITLE --- if (state.title.text || state.subtitle.text) { ctx.textAlign = 'right'; const textX = state.canvasWidth - padding; const gap = 15; // Jarak antara judul dan subjudul // Hitung tinggi total blok teks untuk keperluan posisi vertical const titleHeight = state.title.text ? state.title.size : 0; const subHeight = state.subtitle.text ? state.subtitle.size : 0; const totalHeight = titleHeight + (state.title.text && state.subtitle.text ? gap : 0) + subHeight;

let startY; if (state.title.pos === 'right-top') { startY = padding; } else if (state.title.pos === 'right-center') { startY = (state.canvasHeight - totalHeight) / 2; } else { // right-bottom startY = state.canvasHeight - padding - totalHeight; }

// Gambar Title if (state.title.text) { ctx.font = `bold ${state.title.size}px ${state.title.font}`; ctx.fillStyle = state.title.color; ctx.fillText(state.title.text, textX, startY); }

// Gambar Subtitle (Di bawah Title) if (state.subtitle.text) { ctx.font = `${state.subtitle.size}px ${state.subtitle.font}`; ctx.fillStyle = state.subtitle.color; const subY = startY + titleHeight + (state.title.text ? gap : 0); ctx.fillText(state.subtitle.text, textX, subY); } } }

// ========================================== // 4. EVENT LISTENERS (Inputs & Uploads) // ==========================================

// General & Image Uploads ratioSelect.addEventListener('change', (e) => { state.ratio = e.target.value; if (state.ratio === '16:9') { state.canvasWidth = 1280; state.canvasHeight = 720; } else if (state.ratio === '4:3') { state.canvasWidth = 1280; state.canvasHeight = 960; } else if (state.ratio === '1:1') { state.canvasWidth = 1080; state.canvasHeight = 1080; } render(); });

photoInput.addEventListener('change', (e) => handleImageUpload(e, 'photo')); overlayInput.addEventListener('change', (e) => handleImageUpload(e, 'overlay'));

// Text Engine Listeners (Title) titleText.addEventListener('input', (e) => { state.title.text = e.target.value; render(); }); titlePos.addEventListener('change', (e) => { state.title.pos = e.target.value; render(); }); titleFont.addEventListener('change', (e) => { state.title.font = e.target.value; render(); }); titleSize.addEventListener('input', (e) => { state.title.size = parseInt(e.target.value); render(); }); titleColor.addEventListener('input', (e) => { state.title.color = e.target.value; render(); });

// Text Engine Listeners (Subtitle) subText.addEventListener('input', (e) => { state.subtitle.text = e.target.value; render(); }); subFont.addEventListener('change', (e) => { state.subtitle.font = e.target.value; render(); }); subSize.addEventListener('input', (e) => { state.subtitle.size = parseInt(e.target.value); render(); }); subColor.addEventListener('input', (e) => { state.subtitle.color = e.target.value; render(); });

// Text Engine Listeners (Logo) logoText.addEventListener('input', (e) => { state.logo.text = e.target.value; render(); }); logoPos.addEventListener('change', (e) => { state.logo.pos = e.target.value; render(); }); logoFont.addEventListener('change', (e) => { state.logo.font = e.target.value; render(); });

// Inisialisasi awal render(); // ========================================== // 5. EXPORT ENGINE // ========================================== const exportBtn = document.getElementById('ntg-export-btn');

exportBtn.addEventListener('click', () => { // Memastikan ada sesuatu di kanvas sebelum diekspor // (opsional: bisa juga langsung unduh kanvas kosong/warna dasar) // Konversi isi Canvas menjadi Data URL dengan format WebP dan kualitas 30% const dataURL = canvas.toDataURL('image/webp', 0.3); // Membuat elemen anchor sementara untuk memicu unduhan const downloadLink = document.createElement('a'); // Memberikan nama file dinamis menggunakan timestamp agar tidak menimpa file lama const timestamp = new Date().getTime(); downloadLink.download = `thumbnail-${timestamp}.webp`; downloadLink.href = dataURL; // Menambahkan link ke dalam dokumen, klik, lalu hapus kembali document.body.appendChild(downloadLink); downloadLink.click(); document.body.removeChild(downloadLink); });

})();

Tool Online Generate Thumbnail Gratis

Menyusun Riset Kata Kunci: Panduan Lengkap untuk Membangun Strategi SEO yang Efektif

Eksperimen Syntax Highlighting Gutenberg Code Block dengan CSS dan JavaScript

Taufik Nurhasan

Related Posts

Generator Prompt Gambar AI dengan Kustomisasi Warna Kulit

Kalkulator HPP dan Harga Jual Makanan Online Gratis

Alat Hitung Bangunan Online Gratis dan Praktis

Keyword Density Checker: Cek Kepadatan Kata Kunci Artikel SEO

Text Converter: Konversi HTML ke Teks dan Teks ke HTML

Navin Thumbnail Studio

Eksperimen Syntax Highlighting Gutenberg Code Block dengan CSS dan JavaScript

When the Path We Choose No Longer Shows Us the Way

Tinggalkan Balasan Batalkan balasan

Artikel Diperbarui

Setting LiteSpeed Cache untuk JNews: Panduan Optimasi WordPress di Navin.id

Generator Prompt Gambar AI dengan Kustomisasi Warna Kulit

Cara Mengaktifkan HTTPS di Blogger dan Mengatasi Masalahnya

5 Aplikasi Android yang Bermanfaat untuk Kebutuhan Harian

Color Mind Reader: Sulap Tebak Warna Secara Digital

Category

navin.id

Welcome Back!

Retrieve your password

Tool Online Generate Thumbnail Gratis

General

Images

Title

Subtitle

Logo / Site Name

Menyusun Riset Kata Kunci: Panduan Lengkap untuk Membangun Strategi SEO yang Efektif

Eksperimen Syntax Highlighting Gutenberg Code Block dengan CSS dan JavaScript

Related Posts

Tinggalkan Balasan Batalkan balasan

Artikel Diperbarui

Tag

Category

navin.id

Welcome Back!

Retrieve your password