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",1738498669127],"version","currentUserHasLiked","likeCount","forkCount","referenceCount","dependencyCount",1,"commentCount","prCount","mergedPr",{"_128":129,"_130":131},"handle","AIWB","profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ycU91M051U0JoMFZtclVEaFY2MDNCUmlFbTYifQ","forkedVal",{"_112":134,"_128":135,"_98":99,"_117":136,"_137":-5},"d20a918c-7288-11ef-a4e9-de64eea55b61","g",9,"prDisabledHint","interval","slug","AIWB/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",[145],{"_117":31,"_146":-5,"_115":147,"_112":110},"prId",["D",1738498669127],"recentThread","breadcrumbs","comments",[],"isOwner","routes/_app.v.$handle.$name.versions.$(version)",{"_93":155,"_128":129,"_98":99,"_20":156,"_152":26,"_94":159,"_143":168,"_117":-5,"_181":31,"_182":183,"_184":123,"_185":-5},"list",{"_112":96,"_128":129,"_115":157,"_158":-5,"_130":131},["D",1734545743765],"bio",{"_98":99,"_95":96,"_100":101,"_102":-5,"_103":160,"_104":105,"_106":66,"_107":108,"_109":110,"_111":26,"_112":110,"_113":114,"_115":161,"_117":31,"_118":26,"_119":31,"_120":31,"_121":31,"_122":123,"_124":31,"_125":31,"_126":-5,"_20":162,"_132":163,"_138":-7,"_139":140,"_141":142,"_143":165},true,["D",1738498669127],{"_128":129,"_130":131},{"_112":134,"_128":135,"_98":99,"_117":136,"_137":164},"Can't create a PR without code or readme changes",[166],{"_117":31,"_146":-5,"_115":167,"_112":110},["D",1738498669127],[169],{"_112":110,"_113":114,"_117":31,"_115":170,"_171":99,"_100":101,"_107":108,"_128":129,"_11":96,"_172":-5,"_173":-5,"_174":-5,"_152":26,"_139":140,"_175":-5,"_176":177},["D",1738498669127],"valName","deletedAt","messageId","threadId","previous","stats",{"_178":179,"_180":31},"additions",396,"deletions","page","pageSize",8,"total","redirect","routes/_app","actionData","errors"]

ThumbMaker

Versions

v0