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;","deleted","label",[130],"45a395f0-2781-11f0-b46e-569c3dd06744","README.md","45a3967c-2781-11f0-b46e-569c3dd06744",1,["D",1726153709833],"Migrated from folder: Apps/ThumbMaker",[146],"pulls","branches","envVars",{"_158":22,"_160":22},"connections",{"_158":22,"_159":22},"count","unfilledCount","emptyCount",{"_28":145,"_13":146,"_131":147,"_132":-5,"_133":94,"_134":148,"_135":47,"_48":167,"_91":22,"_138":116,"_140":150,"_142":20,"_143":-5,"_164":168,"_104":169},{"_28":129,"_13":130,"_131":71,"_132":-5,"_133":94,"_134":92,"_135":47,"_48":163,"_91":137,"_138":139,"_140":141,"_142":20,"_143":-5,"_164":165,"_104":166},["D",1726311743678],"children",[],[130],["D",1726153709833],[],[146],["D",1746209662089],{"_11":12,"_57":53},{"_11":12,"_51":-5,"_52":53,"_36":37,"_54":55,"_56":20},{"_91":92,"_13":93,"_28":94,"_95":67,"_96":-5,"_97":-5,"_98":-5,"_99":-5,"_100":-5,"_101":14,"_102":12},"ctx",{"_41":-5,"_124":207,"_208":209,"_210":211,"_212":20,"_213":20,"_214":20,"_215":47,"_216":-5,"_217":-7,"_218":-7,"_219":22,"_220":20,"_221":20,"_222":-5,"_223":20,"_224":20,"_225":20,"_226":-5},"ENV",{"_178":179,"_180":181,"_182":93,"_183":184,"_185":186,"_187":188,"_189":190,"_191":192,"_193":194,"_195":196,"_197":198,"_199":200,"_201":202,"_203":204,"_205":206},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Remixes2

Remixes
2