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(), orgetCanvas(). - 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.