Design + implementation
How This Phone Wallpaper Editor Works
This tool is a static web application. It needs no image server: the browser opens the chosen file, calculates one aspect-preserving transform, renders the preview, and creates the final download.
The complete data path
- The file picker returns a
Fileobject for the image the user selected. - The browser decodes it with
createImageBitmap()or anImagefallback. - JavaScript reads only width, height, and decoded pixels in memory.
- Canvas 2D draws the selected composition.
canvas.toBlob()creates the PNG, JPEG, or WebP download.
No step requires a fetch request containing the image. Static hosting delivers HTML, CSS, and JavaScript; the device performs the image work.
One transform prevents stretching
The implementation computes one scale value and applies it to both source dimensions. For a source Sᵥ × Sₕ and target Tᵥ × Tₕ:
- Fit scale:
min(Tᵥ ÷ Sᵥ, Tₕ ÷ Sₕ) - Fill scale:
max(Tᵥ ÷ Sᵥ, Tₕ ÷ Sₕ)
The editor then centers the drawn rectangle. Dragging changes its offset within bounded travel, so a Fill image cannot expose an empty edge and a Fit image stays inside the canvas.
Blur fill is a two-layer render
The background uses a slightly enlarged Fill transform plus a Canvas blur and a dark translucent wash. The foreground uses the Fit transform. The foreground remains complete while the background covers the screen.
Preview pixels are separate from export pixels
Rendering a 1440 × 3120 canvas on every pointer movement would waste work on a small mobile display. The live preview scales the target down to the visible phone frame. The transform uses the same normalized offsets and zoom, so the composition remains equivalent.
Download creates a new off-screen canvas at the full requested dimensions and repeats the composition once at export quality.
Phone UI guides stay outside the canvas
The time, camera cutout, icon grid, dock, gesture bar, and dashed safe area are HTML/CSS overlays above the preview Canvas. Because they are not drawn into the Canvas, the export cannot accidentally include them.
Rotation and flipping
A 90-degree rotation swaps the effective source width and height for placement math. During drawing, Canvas translates to the image center, rotates the coordinate system, optionally flips the horizontal axis, and then draws the source around that center.
Intentional limits
- Output dimensions are capped at 8192 pixels per side to avoid accidental memory exhaustion.
- Input is capped at 40 MB in the interface.
- The editor does not claim to recover detail from a small source.
- It does not simulate every vendor launcher or widget.
- HEIC support depends on the browser’s decoder; JPEG, PNG, and WebP are safer.
How the math is tested
Automated tests verify that Fit keeps the source inside the target, Fill covers the target, offsets remain bounded, rotations swap effective dimensions, and output formats map to the expected MIME types. Browser verification then loads a sample, changes the composition, and checks the rendered Canvas and controls.
Design principle: the result panel reports what happened—crop, padding, or ratio match—because correct math should also be understandable.
References
Primary and product sources accessed July 30, 2026: