/** * This application creates a thumbnail maker using Hono for server-side routing and client-side JavaScript for image processing. * It allows users to upload images, specify output options, and generate a composite thumbnail image. * The app uses the HTML5 Canvas API for image manipulation and supports drag-and-drop functionality. * * The process is divided into two steps: * 1. Generating thumbnails: Users choose thumbnail size options and create individual thumbnails. * 2. Rendering: Users can create and export the final composite image with options for format and quality. * This two-step process allows changing format or quality without re-rendering the entire canvas. * * Additional features: * - Users can go back from the second step to the first one to regenerate thumbnails. * - Dropping new files takes the user back to the first step. * - A "Download Metadata" button is added to download a JSON file with thumbnail information. */ import { serve } from 'https://esm.town/v/g/serveUtils'; import { Hono } from 'npm:hono'; function html() { /* Thumbnail Maker

Thumbnail Maker

📷 Drag & drop images here or click to select

Step 1: Generate Thumbnails

Thumbnail Height:
Keep Aspect Ratio
Thumbnail Width:

*/ } function css() { /* body { font-family: Arial, sans-serif; font-size: 16px; max-width: 800px; margin: 0 auto; padding: 20px; background-color: #f0f0f0; } #app { background-color: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); color: #333; } #dropZone { border: 2px dashed #ccc; border-radius: 4px; padding: 20px; text-align: center; cursor: pointer; margin-bottom: 20px; transition: background-color 0.3s ease; } #dropZone.drag-over { background-color: #e0e0e0; } #thumbnailOptions, #renderOptions { margin-bottom: 20px; } label { display: block; margin-bottom: 10px; } input[type="number"], select { width: 100%; padding: 8px; margin-top: 5px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } input[type="checkbox"] { margin-right: 5px; } select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M10.293 3.293L6 7.586 1.707 3.293A1 1 0 00.293 4.707l5 5a1 1 0 001.414 0l5-5a1 1 0 10-1.414-1.414z' fill='%23333'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 30px; } button { display: inline-block; width: calc(50% - 5px); padding: 10px; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; transition: background-color 0.3s ease; margin-top: 10px; } button:disabled { background-color: #cccccc; cursor: not-allowed; } button:hover:not(:disabled) { background-color: #45a049; } #backBtn { background-color: #f44336; } #backBtn:hover { background-color: #d32f2f; } #progressBar { width: 100%; margin-top: 20px; height: 20px; border-radius: 10px; } #downloadSection { display: flex; justify-content: space-between; margin-top: 20px; } #downloadLink, #downloadMetadataBtn { display: inline-block; width: calc(50% - 5px); text-align: center; padding: 10px; background-color: #008CBA; color: white; text-decoration: none; border-radius: 4px; transition: background-color 0.3s ease; } #downloadLink:hover, #downloadMetadataBtn:hover { background-color: #007B9A; } #imagePreview { margin-top: 20px; text-align: center; } #imagePreview img { max-width: 100%; height: auto; } */ } function js() { /* const fileInput = document.getElementById('fileInput'); const dropZone = document.getElementById('dropZone'); const generateBtn = document.getElementById('generateBtn'); const renderBtn = document.getElementById('renderBtn'); const backBtn = document.getElementById('backBtn'); const progressBar = document.getElementById('progressBar'); const downloadLink = document.getElementById('downloadLink'); const downloadMetadataBtn = document.getElementById('downloadMetadataBtn'); const outputFormat = document.getElementById('outputFormat'); const outputQuality = document.getElementById('outputQuality'); const thumbHeight = document.getElementById('thumbHeight'); const keepAspectRatio = document.getElementById('keepAspectRatio'); const thumbWidth = document.getElementById('thumbWidth'); const imagePreview = document.getElementById('imagePreview'); const thumbnailOptions = document.getElementById('thumbnailOptions'); const renderOptions = document.getElementById('renderOptions'); const downloadSection = document.getElementById('downloadSection'); let files = []; let thumbnailCanvas; let thumbnailMetadata; function updateUI() { generateBtn.disabled = files.length === 0; thumbWidth.disabled = keepAspectRatio.checked; } function resetToStep1() { thumbnailOptions.style.display = 'block'; renderOptions.style.display = 'none'; downloadSection.style.display = 'none'; imagePreview.innerHTML = ''; thumbnailCanvas = null; thumbnailMetadata = null; updateUI(); } fileInput.addEventListener('change', (event) => { files = Array.from(event.target.files); resetToStep1(); }); dropZone.addEventListener('click', () => fileInput.click()); dropZone.addEventListener('dragover', (event) => { event.preventDefault(); dropZone.classList.add('drag-over'); }); dropZone.addEventListener('dragleave', () => { dropZone.classList.remove('drag-over'); }); dropZone.addEventListener('drop', (event) => { event.preventDefault(); dropZone.classList.remove('drag-over'); files = Array.from(event.dataTransfer.files).filter(file => file.type.startsWith('image/')); resetToStep1(); }); keepAspectRatio.addEventListener('change', updateUI); generateBtn.addEventListener('click', async (event) => { event.preventDefault(); if (files.length === 0) return; generateBtn.disabled = true; progressBar.style.display = 'block'; progressBar.value = 0; const image0 = await getImage(files[0]); const cols = Math.ceil(Math.sqrt(files.length)); const rows = Math.ceil(files.length / cols); const tHeight = parseInt(thumbHeight.value); let tWidth = keepAspectRatio.checked ? Math.floor(tHeight / image0.height * image0.width) : parseInt(thumbWidth.value); const canvasWidth = cols * tWidth; const canvasHeight = rows * tHeight; image0.revoke(); thumbnailCanvas = new OffscreenCanvas(canvasWidth, canvasHeight); const ctx = thumbnailCanvas.getContext('2d', { alpha: false }); let i = 0; for (const file of files) { const col = i % cols; const row = Math.floor(i / cols); const img = await getImage(file); ctx.drawImage(img, col * tWidth, row * tHeight, tWidth, tHeight); img.revoke(); i++; progressBar.value = (i / files.length) * 100; } thumbnailMetadata = { rows, cols, thumbnailCount: files.length, thumbnailWidth: tWidth, thumbnailHeight: tHeight, canvasWidth, canvasHeight }; thumbnailOptions.style.display = 'none'; renderOptions.style.display = 'block'; progressBar.style.display = 'none'; renderBtn.disabled = false; }); renderBtn.addEventListener('click', async () => { if (!thumbnailCanvas) return; renderBtn.disabled = true; progressBar.style.display = 'block'; progressBar.value = 0; const blob = await thumbnailCanvas.convertToBlob({ type: outputFormat.value, quality: outputFormat.value !== 'image/png' ? parseFloat(outputQuality.value) : undefined }); const url = URL.createObjectURL(blob); downloadLink.href = url; downloadLink.download = `thumbnails.${outputFormat.value.split('/')[1]}`; downloadSection.style.display = 'flex'; // Display the generated image const img = document.createElement('img'); img.src = url; imagePreview.innerHTML = ''; imagePreview.appendChild(img); progressBar.style.display = 'none'; renderBtn.disabled = false; }); backBtn.addEventListener('click', resetToStep1); downloadMetadataBtn.addEventListener('click', () => { if (!thumbnailMetadata) return; const metadataBlob = new Blob([JSON.stringify(thumbnailMetadata, null, 2)], { type: 'application/json' }); const metadataUrl = URL.createObjectURL(metadataBlob); const tempLink = document.createElement('a'); tempLink.href = metadataUrl; tempLink.download = 'thumbnail_metadata.json'; tempLink.click(); URL.revokeObjectURL(metadataUrl); }); function getImage(file) { return new Promise((resolve) => { const url = URL.createObjectURL(file); const img = new Image(); img.revoke = () => URL.revokeObjectURL(url); img.onload = () => resolve(img); img.src = url; }); } updateUI(); */ } const app = new Hono(); app.get('/', serve(html, 'text/html')); app.get('/styles.css', serve(css, 'text/css')); app.get('/main.js', serve(js, 'text/javascript')); export default app.fetch;

Thumbnail Maker

Step 1: Generate Thumbnails

Step 2: Render and Export

ThumbMaker

Versions

v1

v0