Thumbnail Maker

📷 Drag & drop images here or click to select

\n \n

Step 1: Generate Thumbnails

\n \n Thumbnail Height:\n \n
\n \n \n Keep Aspect Ratio\n
\n \n Thumbnail Width:\n \n
\n \n

Step 2: Render and Export

\n \n Output Format:\n \n
\n \n Quality (JPEG/WebP):\n \n
\n \n \n

\n \n

\n Download Thumbnails\n \n

\n\n\n */\n}\n\nfunction css() {\n /*\nbody {\n font-family: Arial, sans-serif;\n font-size: 16px;\n max-width: 800px;\n margin: 0 auto;\n padding: 20px;\n background-color: #f0f0f0;\n}\n\n#app {\n background-color: white;\n padding: 20px;\n border-radius: 8px;\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n color: #333;\n}\n\n#dropZone {\n border: 2px dashed #ccc;\n border-radius: 4px;\n padding: 20px;\n text-align: center;\n cursor: pointer;\n margin-bottom: 20px;\n transition: background-color 0.3s ease;\n}\n\n#dropZone.drag-over {\n background-color: #e0e0e0;\n}\n\n#thumbnailOptions, #renderOptions {\n margin-bottom: 20px;\n}\n\nlabel {\n display: block;\n margin-bottom: 10px;\n}\n\ninput[type=\"number\"], select {\n width: 100%;\n padding: 8px;\n margin-top: 5px;\n border: 1px solid #ccc;\n border-radius: 4px;\n box-sizing: border-box;\n}\n\ninput[type=\"checkbox\"] {\n margin-right: 5px;\n}\n\nselect {\n appearance: none;\n 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\");\n background-repeat: no-repeat;\n background-position: right 10px center;\n padding-right: 30px;\n}\n\nbutton {\n display: inline-block;\n width: calc(50% - 5px);\n padding: 10px;\n background-color: #4CAF50;\n color: white;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n font-size: 16px;\n transition: background-color 0.3s ease;\n margin-top: 10px;\n}\n\nbutton:disabled {\n background-color: #cccccc;\n cursor: not-allowed;\n}\n\nbutton:hover:not(:disabled) {\n background-color: #45a049;\n}\n\n#backBtn {\n background-color: #f44336;\n}\n\n#backBtn:hover {\n background-color: #d32f2f;\n}\n\n#progressBar {\n width: 100%;\n margin-top: 20px;\n height: 20px;\n border-radius: 10px;\n}\n\n#downloadSection {\n display: flex;\n justify-content: space-between;\n margin-top: 20px;\n}\n\n#downloadLink, #downloadMetadataBtn {\n display: inline-block;\n width: calc(50% - 5px);\n text-align: center;\n padding: 10px;\n background-color: #008CBA;\n color: white;\n text-decoration: none;\n border-radius: 4px;\n transition: background-color 0.3s ease;\n}\n\n#downloadLink:hover, #downloadMetadataBtn:hover {\n background-color: #007B9A;\n}\n\n#imagePreview {\n margin-top: 20px;\n text-align: center;\n}\n\n#imagePreview img {\n max-width: 100%;\n height: auto;\n}\n */\n}\n\nfunction js() {\n /*\nconst fileInput = document.getElementById('fileInput');\nconst dropZone = document.getElementById('dropZone');\nconst generateBtn = document.getElementById('generateBtn');\nconst renderBtn = document.getElementById('renderBtn');\nconst backBtn = document.getElementById('backBtn');\nconst progressBar = document.getElementById('progressBar');\nconst downloadLink = document.getElementById('downloadLink');\nconst downloadMetadataBtn = document.getElementById('downloadMetadataBtn');\nconst outputFormat = document.getElementById('outputFormat');\nconst outputQuality = document.getElementById('outputQuality');\nconst thumbHeight = document.getElementById('thumbHeight');\nconst keepAspectRatio = document.getElementById('keepAspectRatio');\nconst thumbWidth = document.getElementById('thumbWidth');\nconst imagePreview = document.getElementById('imagePreview');\nconst thumbnailOptions = document.getElementById('thumbnailOptions');\nconst renderOptions = document.getElementById('renderOptions');\nconst downloadSection = document.getElementById('downloadSection');\n\nlet files = [];\nlet thumbnailCanvas;\nlet thumbnailMetadata;\n\nfunction updateUI() {\n generateBtn.disabled = files.length === 0;\n thumbWidth.disabled = keepAspectRatio.checked;\n}\n\nfunction resetToStep1() {\n thumbnailOptions.style.display = 'block';\n renderOptions.style.display = 'none';\n downloadSection.style.display = 'none';\n imagePreview.innerHTML = '';\n thumbnailCanvas = null;\n thumbnailMetadata = null;\n updateUI();\n}\n\nfileInput.addEventListener('change', (event) => {\n files = Array.from(event.target.files);\n resetToStep1();\n});\n\ndropZone.addEventListener('click', () => fileInput.click());\n\ndropZone.addEventListener('dragover', (event) => {\n event.preventDefault();\n dropZone.classList.add('drag-over');\n});\n\ndropZone.addEventListener('dragleave', () => {\n dropZone.classList.remove('drag-over');\n});\n\ndropZone.addEventListener('drop', (event) => {\n event.preventDefault();\n dropZone.classList.remove('drag-over');\n files = Array.from(event.dataTransfer.files).filter(file => file.type.startsWith('image/'));\n resetToStep1();\n});\n\nkeepAspectRatio.addEventListener('change', updateUI);\n\ngenerateBtn.addEventListener('click', async (event) => {\n event.preventDefault();\n\n if (files.length === 0) return;\n\n generateBtn.disabled = true;\n progressBar.style.display = 'block';\n progressBar.value = 0;\n\n const image0 = await getImage(files[0]);\n const cols = Math.ceil(Math.sqrt(files.length));\n const rows = Math.ceil(files.length / cols);\n const tHeight = parseInt(thumbHeight.value);\n let tWidth = keepAspectRatio.checked\n ? Math.floor(tHeight / image0.height * image0.width)\n : parseInt(thumbWidth.value);\n\n const canvasWidth = cols * tWidth;\n const canvasHeight = rows * tHeight;\n\n image0.revoke();\n\n thumbnailCanvas = new OffscreenCanvas(canvasWidth, canvasHeight);\n const ctx = thumbnailCanvas.getContext('2d', { alpha: false });\n\n let i = 0;\n for (const file of files) {\n const col = i % cols;\n const row = Math.floor(i / cols);\n\n const img = await getImage(file);\n ctx.drawImage(img, col * tWidth, row * tHeight, tWidth, tHeight);\n img.revoke();\n\n i++;\n progressBar.value = (i / files.length) * 100;\n }\n\n thumbnailMetadata = {\n rows,\n cols,\n thumbnailCount: files.length,\n thumbnailWidth: tWidth,\n thumbnailHeight: tHeight,\n canvasWidth,\n canvasHeight\n };\n\n thumbnailOptions.style.display = 'none';\n renderOptions.style.display = 'block';\n progressBar.style.display = 'none';\n renderBtn.disabled = false;\n});\n\nrenderBtn.addEventListener('click', async () => {\n if (!thumbnailCanvas) return;\n\n renderBtn.disabled = true;\n progressBar.style.display = 'block';\n progressBar.value = 0;\n\n const blob = await thumbnailCanvas.convertToBlob({\n type: outputFormat.value,\n quality: outputFormat.value !== 'image/png' ? parseFloat(outputQuality.value) : undefined\n });\n\n const url = URL.createObjectURL(blob);\n downloadLink.href = url;\n downloadLink.download = `thumbnails.${outputFormat.value.split('/')[1]}`;\n downloadSection.style.display = 'flex';\n\n // Display the generated image\n const img = document.createElement('img');\n img.src = url;\n imagePreview.innerHTML = '';\n imagePreview.appendChild(img);\n\n progressBar.style.display = 'none';\n renderBtn.disabled = false;\n});\n\nbackBtn.addEventListener('click', resetToStep1);\n\ndownloadMetadataBtn.addEventListener('click', () => {\n if (!thumbnailMetadata) return;\n\n const metadataBlob = new Blob([JSON.stringify(thumbnailMetadata, null, 2)], { type: 'application/json' });\n const metadataUrl = URL.createObjectURL(metadataBlob);\n const tempLink = document.createElement('a');\n tempLink.href = metadataUrl;\n tempLink.download = 'thumbnail_metadata.json';\n tempLink.click();\n URL.revokeObjectURL(metadataUrl);\n});\n\nfunction getImage(file) {\n return new Promise((resolve) => {\n const url = URL.createObjectURL(file);\n const img = new Image();\n img.revoke = () => URL.revokeObjectURL(url);\n img.onload = () => resolve(img);\n img.src = url;\n });\n}\n\nupdateUI();\n */\n}\n\nconst app = new Hono();\napp.get('/', serve(html, 'text/html'));\napp.get('/styles.css', serve(css, 'text/css'));\napp.get('/main.js', serve(js, 'text/javascript'));\n\nexport default app.fetch;","createdAt",["D",1726311743678],"version",9,"currentUserHasLiked","likeCount","forkCount","referenceCount","dependencyCount",1,"commentCount","prCount","mergedPr",{"_130":131,"_132":133},"handle","g","profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJqRlBqSjdFTUlTVmVORmpObmFqZmJLVWh5VCJ9","forkedVal","interval","slug","g/ThumbMaker","description","* This application creates a thumbnail maker using Hono for server-side routing and client-side JavaScript for image processing.\n * It allows users to upload images, specify output options, and generate a composite thumbnail image.\n * The app uses the HTML5 Canvas API for image manipulation and supports drag-and-drop functionality.\n * \n * The process is divided into two steps:\n * 1. Generating thumbnails: Users choose thumbnail size options and create individual thumbnails.\n * 2. Rendering: Users can create and export the final composite image with options for format and quality.\n * This two-step process allows changing format or quality without re-rendering the entire canvas.\n * \n * Additional features:\n * - Users can go back from the second step to the first one to regenerate thumbnails.\n * - Dropping new files takes the user back to the first step.\n * - A \"Download Metadata\" button is added to download a JSON file with thumbnail information.","versions",[142,145,149,153,157,161,165,169,172,175],{"_118":119,"_143":-5,"_116":144,"_113":111},"prId",["D",1726311743678],{"_118":146,"_143":-5,"_116":147,"_113":148},8,["D",1726178847365],"65aaa198-7153-11ef-a77f-de64eea55b61",{"_118":150,"_143":-5,"_116":151,"_113":152},7,["D",1726171219897],"a3574f6c-7141-11ef-8aa9-de64eea55b61",{"_118":154,"_143":-5,"_116":155,"_113":156},6,["D",1726170979075],"13ccc34a-7141-11ef-bc89-de64eea55b61",{"_118":158,"_143":-5,"_116":159,"_113":160},5,["D",1726154430795],"8c41d6ac-711a-11ef-b9ba-de64eea55b61",{"_118":162,"_143":-5,"_116":163,"_113":164},4,["D",1726154407257],"7e3a2f6e-711a-11ef-aa6a-de64eea55b61",{"_118":166,"_143":-5,"_116":167,"_113":168},3,["D",1726154013602],"9397294e-7119-11ef-87cb-de64eea55b61",{"_118":90,"_143":-5,"_116":170,"_113":171},["D",1726153779268],"07ea99ee-7119-11ef-9806-de64eea55b61",{"_118":125,"_143":-5,"_116":173,"_113":174},["D",1726153773562],"0483dab8-7119-11ef-8e41-de64eea55b61",{"_118":31,"_143":-5,"_116":176,"_113":177},["D",1726153709833],"de87ab64-7118-11ef-84ac-de64eea55b61","recentThread","breadcrumbs","comments",[],"isOwner","routes/_app.v.$handle.$name.versions.$(version)",{"_93":185,"_186":187,"_94":188},"single","redirect","/v/g/ThumbMaker/versions",{"_113":168,"_114":189,"_118":166,"_116":190,"_191":99,"_100":101,"_108":109,"_130":131,"_11":96,"_192":-5,"_193":-5,"_194":-5,"_182":26,"_136":137},"/**\n * This application creates a thumbnail maker using Hono for server-side routing and client-side JavaScript for image processing.\n * It allows users to upload images, specify output options, and generate a composite thumbnail image.\n * The app uses the HTML5 Canvas API for image manipulation and supports drag-and-drop functionality.\n */\n\nimport { serve } from 'https://esm.town/v/g/serveUtils';\nimport { Hono } from 'npm:hono';\n\nfunction html() {\n /*\n\n\n\n \n \n Thumbnail Maker\n \n \n\n\n

Thumbnail Maker

📷 Drag & drop images here or click to select

\n \n

\n \n Output Format:\n \n
\n \n Quality (JPEG/WebP):\n \n
\n \n Thumbnail Height:\n \n
\n \n \n Keep Aspect Ratio\n
\n \n Thumbnail Width:\n \n \n

\n \n \n Download Thumbnails\n

ThumbMaker

Version 3