Svelte Image Input and Manipulation Components

Generate small, compressed images for direct database storage. Perfect for profile pictures, avatars, and thumbnails.

ImageInput Example

Load an image using drag and drop, clipboard paste, or by clicking the "Load an image" button. Then, resize and crop the image. The output image will be displayed beside along with the final size in bytes of the data URL.

Paste Scope: When set to "Window" (default), paste works anywhere on the page. When set to "Component", paste only works when the component is focused (click on it first). Try switching between modes and pasting an image!

Quality (90%):

Theme: 📖 Language: 📖 Paste Scope: 📖

Input Image

Drop, paste, or

Output Image

Documentation

Learn more about the features demonstrated above:

Theming Guide - Customize component appearance with CSS variables
Internationalization (i18n) - Customize text labels and support multiple languages
Paste Scope Control - Control how paste events are handled

Check out the code on GitHub.