A lightweight, web-based tool to generate 3D covers automatically.
You can find a live demo over at zuescho.de/cover
This tool runs entirely in the browser (client-side) using the HTML5 Canvas API. It solves the problem of manually aligning posters into a 3D template by using a Smart Masking System.
Instead of hardcoding coordinates (which breaks if you change the template), the app dynamically scans a file named assets/mask.png when it loads.
- Scan: The app reads the pixels of
mask.png. - Detect: It looks for non-transparent pixels to find the "Safe Zone" (the blue area of the case).
- Calculate: It calculates the exact X, Y, Width, and Height of that area.
- Apply: When you upload a poster, it automatically scales and crops it to fit exactly inside that detected area, then layers the plastic case overlays on top.
This means if you ever want to change the case shape, you only need to update the images in the assets folder, no code changes required!
- App Created By: Zuescho (with assistance from Gemini AI)
- Blu-ray Case Template: DVD Plastic Case Resource by 920r9 (DeviantArt)
- Inspired By: Aikino by omegas82128
This project is open for personal use. Please respect the licenses of the original assets and inspirations linked above.