简体中文 | English
Avatar clipper is a lightweight avatar cropping tool developed based on Konva, supporting TypeScript. Its core architecture adopts Command and EventBus modules, providing concise API operations and flexible event callback mechanisms. The tool supports special features such as image loading, cropping box interaction, watermark addition, and dark part effects, and can export cropping results in multiple formats. Compared to existing solutions, Avatar Clipper is more lightweight while maintaining complete functionality, without binding any UI components. The core library packaging results are only over 200 kb, and the core clipping function is only implemented through APIs, making it suitable for various scenarios such as social media and e-commerce.
Results show
🎉 Official website experience address
🔗 Alternate address: stackblitz
| Event Name | Description | Returns |
|---|---|---|
| afterInit | Container initialization completed | Crop result upon initialization completion |
| imageLoaded | Set image loading completed | Image Properties |
| imageError | Image setting failed callback | failure reason |
| imageUpdate | Image update callback | Image Properties |
| preview | Live Preview | Preview Results(string) |
| Command | Description | Returns |
|---|---|---|
| clearImage | Clear image | 无 |
| reset | Reset components | 无 |
| destroy | Destruction of components | 无 |
| getImageAttrs | Retrieve image attributes | ImageAttrs |
| getResult | Obtain screenshot results | string | Blob | HTMLCanvasElement |
| updateClipperOptions | Update clipper options | 无 |
| setImage | Set Picture | 无 |
| updateCropAttrs | Update Crop Box Properties | 无 |
| updateImageAttrs | Update image properties | 无 |
| updateWatermarkAttrs | Update watermark properties | 无 |
- Translation
Roller (Move up and down)Roller + Shift (Move left and right) - Scale
Roller + Ctrl (Zoom in and out) - Drag
Drag (Up, down, left, right)
// Konva Image Cross domain processing for image creation
const imageElement = new Image();
// Parse Image Source
const source = await parseImageSource(image);
// Add cross domain processing crossOrigin = Anonymous
imageElement.crossOrigin = "Anonymous";
// set image source
imageElement.src = source;This instance has added cross domain compatibility when creating images, and this method is only effective when the requested domain has an Access Control Allow Origin header that allows sharing requests. If it doesn't work, then you must configure your server in a different way (it's beyond Konva's scope), or you can try storing the image in another location that supports CORS requests.
- Welcome everyone to raise issue;
- Welcome everyone to raise PR，Welcome everyone to fork the project;
- Welcome everyone to join the discussion group:
