I built a free browser-based image & utility toolkit — here's what I learned

说明与用途

ToolZip 是一套 18 个完全在浏览器中运行的工具，提供隐私优先的图像、代码和 3D 文件处理。

问题

Clients needed to compress images but free online tools risked uploading files to unknown servers.

结果

ToolZip delivers a privacy‑first, browser‑only image and utility toolkit, overcoming challenges like EAN‑13 barcode rendering and 3D viewer stability, and plans to expand with lazy loading and server‑side generation.

工作流

• 1. Built a Next.js 14 app with Vercel deployment.
• 2. Implemented image tools using browser-image-compression, heic2any, and Canvas API.
• 3. Added developer tools (JSON formatter, URL encoder/decoder, Base64, timestamp, color converter).
• 4. Created utilities (QR/barcode generator, password generator, special characters tool, 3D viewer).
• 5. Solved EAN‑13 barcode rendering by extracting glyphs and re‑rendering digits as SVG text.
• 6. Fixed 3D viewer by switching Three.js from CDN to npm import and handling BVH scaling correctly.
• 7. Planned lazy loading of tool components and server‑side generation for complex outputs.
• 8. Tested with real files and expanded to more formats.
• 9. Launched and monitored traffic and SEO.
• 10. Gathered feedback for future features.

证据

ToolZip currently has 18 tools across several categories

来源

The library I used (bwip-js) has a known bug where enabling includetext: true causes the text digits to overlap with the bars

来源

I initially loaded Three.js via CDN and referenced it as window.THREE. This caused intermittent failures

来源