Thumbnail Maker

The ngs-thumbnail-maker component lets users create a square thumbnail from an image by dragging the image inside a fixed crop area and adjusting zoom. The app can then read the finished 300x300 thumbnail as a data URL, blob, or canvas.

Key Features:

Drag positioning: Move the image inside the thumbnail frame before saving.
Zoom controls: Use the built-in slider and plus/minus buttons to adjust scale.
Bitmap output: Retrieve the final thumbnail through getDataUrl(), toBlob(), or getCanvas().
Upload workflows: Combine with Upload when users need to select a local image first.

Use it for avatars, profile images, CMS thumbnails, media library previews, and card images that need a simple square output.

The NgStarter Angular Thumbnail Maker component lets you create a square 300x300 thumbnail bitmap from an image with drag positioning and zoom controls. Use ngs-thumbnail-maker when users need to position and zoom an image inside a fixed square frame, then save the finished thumbnail as a data URL, Blob, or canvas. It includes examples for Basic thumbnail maker, Thumbnail maker with helper text, and Thumbnail maker with file select.

Basic thumbnail maker

Use thumbnail maker when the user needs to position and zoom an image before generating a square thumbnail bitmap.

Thumbnail maker with helper text

Add helper text when users may not know that the image can be dragged inside the thumbnail frame.

Drag to change position

Thumbnail maker with file select

Combine thumbnail maker with Upload when users select a local image and then save the generated thumbnail result.