Text to Image Tool

Text → Image

Create images from text. Customize font, color, background and export PNG or SVG.

Text

Font Size (px) Color

Width (px) Height (px) Align

Background color Use gradient Gradient from to

Shadow Line height Bold

Upload background image Image mode

Preview updates when you click Render. Resize canvas via Width/Height fields.

:root { --bg: #0f172a; --panel-bg: #fff; --muted: #6b7280; --accent: #6366f1; } * { box-sizing: border-box; } html,body { height:100%; margin:0; font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; background: #f3f4f6; color: #0b1220; } .container { max-width:1200px; margin:28px auto; padding:18px; } header h1 { margin:0 0 4px 0; font-size:20px; } .subtitle { margin:0 0 18px 0; color:var(--muted); font-size:13px; } .panel { display:flex; gap:20px; align-items:flex-start; } .controls { width:420px; background:var(--panel-bg); padding:16px; border-radius:8px; box-shadow:0 6px 18px rgba(12,17,23,0.06); } .preview { flex:1; display:flex; flex-direction:column; gap:12px; align-items:center; } label { display:block; font-size:13px; color:#111827; margin-bottom:10px; } textarea { width:100%; font-family:inherit; padding:10px; border-radius:6px; border:1px solid #e5e7eb; resize:vertical; font-size:15px; } input[type="number"], select, input[type="color"], input[type="file"] { width:100%; padding:8px; border-radius:6px; border:1px solid #e5e7eb; background:#fff; font-size:14px; } input[type="checkbox"] { transform:scale(1.05); margin-left:8px; } .row { display:flex; gap:10px; margin-bottom:10px; } .row label { flex:1; } .actions { display:flex; gap:8px; margin-top:6px; flex-wrap:wrap; } button { padding:8px 12px; border-radius:6px; border:0; background:var(--accent); color:#fff; cursor:pointer; font-weight:600; } button.secondary { background:#64748b; } .canvas-wrap { width:100%; display:flex; justify-content:center; align-items:center; background:linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); padding:18px; border-radius:8px; border:1px solid #e6edf7; min-height:200px; } canvas { background:transparent; max-width:100%; height:auto; box-shadow:0 6px 18px rgba(2,6,23,0.06); border-radius:6px; } .hint { font-size:13px; color:var(--muted); } footer { margin-top:18px; color:var(--muted); font-size:12px; } export function downloadBlob(blob, filename) { const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = filename; document.body.appendChild(a); a.click(); a.remove(); URL.revokeObjectURL(url); } export function loadImageFromFile(file) { return new Promise((resolve, reject) => { if (!file) return resolve(null); const reader = new FileReader(); reader.onload = () => { const img = new Image(); img.onload = () => resolve(img); img.onerror = reject; img.src = reader.result; }; reader.onerror = reject; reader.readAsDataURL(file); }); } export function escapeXml(unsafe) { return unsafe.replace(/[&<>'"]/g, (c) => { switch (c) { case '&': return '&'; case '<': return '<'; case '>': return '>'; case '\'': return '''; case '"': return '"'; } }); } // Responsible for rendering the text and background to a canvas or SVG string export async function renderToCanvas(options) { const { width, height, text, fontFamily, fontSize, fontColor, bgColor, useGradient, gradFrom, gradTo, textAlign, lineHeight, shadow, fontWeight, bgImage, bgMode } = options; const canvas = document.createElement('canvas'); canvas.width = Math.max(1, Math.floor(width)); canvas.height = Math.max(1, Math.floor(height)); const ctx = canvas.getContext('2d'); // Background if (bgImage) { drawImageBackground(ctx, bgImage, canvas.width, canvas.height, bgMode); } else if (useGradient) { const g = ctx.createLinearGradient(0, 0, canvas.width, canvas.height); g.addColorStop(0, gradFrom); g.addColorStop(1, gradTo); ctx.fillStyle = g; ctx.fillRect(0, 0, canvas.width, canvas.height); } else { ctx.fillStyle = bgColor; ctx.fillRect(0, 0, canvas.width, canvas.height); } // Text setup const weight = fontWeight ? '700' : '400'; const fontSpec = `${weight} ${fontSize}px "${fontFamily}"`; ctx.font = fontSpec; ctx.fillStyle = fontColor; ctx.textBaseline = 'top'; if (shadow) { ctx.shadowColor = 'rgba(0,0,0,0.24)'; ctx.shadowBlur = 16; ctx.shadowOffsetY = 6; } else { ctx.shadowColor = 'transparent'; } // Wrapping const padding = Math.max(24, Math.floor(fontSize * 0.6)); const maxTextWidth = canvas.width - padding * 2; const lines = wrapText(ctx, text, maxTextWidth); const totalHeight = lines.length * fontSize * lineHeight; let startY = (canvas.height - totalHeight) / 2; if (startY < padding) startY = padding; // Draw lines for (let i = 0; i < lines.length; i++) { const line = lines[i]; const y = startY + i * fontSize * lineHeight; let x; if (textAlign === 'left') x = padding; else if (textAlign === 'right') x = canvas.width - padding; else x = canvas.width / 2; ctx.textAlign = textAlign; ctx.fillText(line, x, y); } return canvas; } function wrapText(ctx, text, maxWidth) { if (!text) return []; const paragraphs = text.split('\n'); const lines = []; for (const p of paragraphs) { const words = p.split(' '); let current = ''; for (const w of words) { const test = current ? current + ' ' + w : w; const { width } = ctx.measureText(test); if (width > maxWidth && current) { lines.push(current); current = w; } else { current = test; } } if (current) lines.push(current); } return lines; } function drawImageBackground(ctx, img, w, h, mode = 'cover') { if (!img) return; const iw = img.width; const ih = img.height; if (mode === 'stretch') { ctx.drawImage(img, 0, 0, w, h); return; } const scaleX = w / iw; const scaleY = h / ih; if (mode === 'contain') { const scale = Math.min(scaleX, scaleY); const nw = iw * scale; const nh = ih * scale; const x = (w - nw) / 2; const y = (h - nh) / 2; ctx.drawImage(img, x, y, nw, nh); return; } // cover const scale = Math.max(scaleX, scaleY); const nw = iw * scale; const nh = ih * scale; const x = (w - nw) / 2; const y = (h - nh) / 2; ctx.drawImage(img, x, y, nw, nh); } export function canvasToPngBlob(canvas) { return new Promise((resolve) => { canvas.toBlob((b) => resolve(b), 'image/png', 0.95); }); } export function canvasToSvgString(options) { // Create a simple SVG with a rect background and text using for better font rendering const { width, height, text, fontFamily, fontSize, fontColor, bgColor, useGradient, gradFrom, gradTo, textAlign, lineHeight, fontWeight, bgImageDataUrl } = options; const escaped = text.split('\n').map(escapeXml).join('
'); let defs = ''; let fill = bgColor; if (useGradient) { defs = ``; fill = 'url(#g0)'; } let bgImage = ''; if (bgImageDataUrl) { bgImage = ``; } const weight = fontWeight ? 700 : 400; const alignMap = { left: 'start', center: 'middle', right: 'end' }; const anchor = alignMap[textAlign] || 'middle'; const foreign = `

${escaped}

`; const svg = ``; return svg; } function escapeXml(s) { return s.replace(/[&<>'"]/g, (c) => { switch (c) { case '&': return '&'; case '<': return '<'; case '>': return '>'; case '\'': return '''; case '"': return '"'; } }); } import { loadImageFromFile, downloadBlob } from './utils.js'; import { renderToCanvas, canvasToPngBlob, canvasToSvgString } from './canvas.js'; const els = { text: document.getElementById('text-input'), fontSelect: document.getElementById('font-select'), fontSize: document.getElementById('font-size'), fontColor: document.getElementById('font-color'), canvasWidth: document.getElementById('canvas-width'), canvasHeight: document.getElementById('canvas-height'), renderBtn: document.getElementById('render-btn'), previewCanvas: document.getElementById('preview-canvas'), bgColor: document.getElementById('bg-color'), useGradient: document.getElementById('use-gradient'), gradFrom: document.getElementById('grad-from'), gradTo: document.getElementById('grad-to'), textAlign: document.getElementById('text-align'), lineHeight: document.getElementById('line-height'), textShadow: document.getElementById('text-shadow'), fontWeight: document.getElementById('font-weight'), bgImageInput: document.getElementById('bg-image'), bgMode: document.getElementById('bg-mode'), downloadPng: document.getElementById('download-png'), downloadSvg: document.getElementById('download-svg'), clearBg: document.getElementById('clear-bg'), }; let bgImage = null; let lastCanvas = null; let lastSvgDataUrl = null; // UI function toggleGradientControls() { const elems = [document.getElementById('gradient-controls-hidden'), document.getElementById('gradient-controls-hidden-2')]; elems.forEach(e => e.style.display = els.useGradient.checked ? 'inline-block' : 'none'); } toggleGradientControls(); els.useGradient.addEventListener('change', toggleGradientControls); els.bgImageInput.addEventListener('change', async (e) => { const file = e.target.files && e.target.files[0]; if (!file) { bgImage = null; return; } try { bgImage = await loadImageFromFile(file); } catch (err) { bgImage = null; console.error('Failed to load bg image', err); } }); els.renderBtn.addEventListener('click', async () => { await renderPreview(false); }); els.clearBg.addEventListener('click', () => { bgImage = null; els.bgImageInput.value = ''; }); els.downloadPng.addEventListener('click', async () => { await renderPreview(true); if (!lastCanvas) return; const blob = await canvasToPngBlob(lastCanvas); downloadBlob(blob, `text-image-${Date.now()}.png`); }); els.downloadSvg.addEventListener('click', async () => { const options = collectOptions(); if (bgImage) { // create a data url for bg image to embed into SVG // draw bg image to a temporary canvas const tmp = document.createElement('canvas'); tmp.width = options.width; tmp.height = options.height; const ctx = tmp.getContext('2d'); ctx.fillStyle = options.bgColor; ctx.fillRect(0, 0, tmp.width, tmp.height); const { bgMode } = options; const scaleX = tmp.width / bgImage.width; const scaleY = tmp.height / bgImage.height; let sx = 0, sy = 0, sw = bgImage.width, sh = bgImage.height, dx = 0, dy = 0, dw = tmp.width, dh = tmp.height; // draw cover/contain/stretch similar to canvas logic if (bgMode === 'stretch') { ctx.drawImage(bgImage, 0, 0, tmp.width, tmp.height); } else if (bgMode === 'contain') { const scale = Math.min(scaleX, scaleY); const nw = bgImage.width * scale; const nh = bgImage.height * scale; const x = (tmp.width - nw) / 2; const y = (tmp.height - nh) / 2; ctx.drawImage(bgImage, x, y, nw, nh); } else { const scale = Math.max(scaleX, scaleY); const nw = bgImage.width * scale; const nh = bgImage.height * scale; const x = (tmp.width - nw) / 2; const y = (tmp.height - nh) / 2; ctx.drawImage(bgImage, x, y, nw, nh); } const dataUrl = tmp.toDataURL('image/png'); options.bgImageDataUrl = dataUrl; } const svgString = canvasToSvgString(options); const blob = new Blob([svgString], { type: 'image/svg+xml' }); downloadBlob(blob, `text-image-${Date.now()}.svg`); }); function collectOptions() { return { width: parseInt(els.canvasWidth.value, 10) || 1200, height: parseInt(els.canvasHeight.value, 10) || 630, text: els.text.value || '', fontFamily: els.fontSelect.value, fontSize: parseInt(els.fontSize.value, 10) || 48, fontColor: els.fontColor.value, bgColor: els.bgColor.value, useGradient: els.useGradient.checked, gradFrom: els.gradFrom.value, gradTo: els.gradTo.value, textAlign: els.textAlign.value, lineHeight: parseFloat(els.lineHeight.value) || 1.2, shadow: els.textShadow.checked, fontWeight: els.fontWeight.checked, bgImage, bgMode: els.bgMode.value, }; } async function renderPreview(force) { const options = collectOptions(); const canvas = await renderToCanvas(options); const preview = els.previewCanvas; preview.width = canvas.width; preview.height = canvas.height; const ctx = preview.getContext('2d'); ctx.clearRect(0, 0, preview.width, preview.height); ctx.drawImage(canvas, 0, 0); lastCanvas = canvas; } // initial sample text els.text.value = 'Hello, world!\nCreate beautiful images from text.'; // initial render renderPreview(false);