avatar-clipper
v0.0.8
Published
avatar-clipper 是一款基于 Konva 开发的轻量级头像裁剪工具，支持 TypeScript 。其核心架构采用 Command 和 EventBus 模块，提供简洁 API 操作和灵活的事件回调机制。工具支持图片加载、裁剪框交互、水印添加、暗部效果等特色功能，并能导出多种格式的裁剪结果。相比现有方案，avatar-clipper 在保持功能完整的同时更加轻量化，不绑定任何 UI 组件，核心库打包结果仅 200 多 kb，仅通过 API 实现核心裁剪功能，适用于社交媒体、电商等多场景需求。
Downloads
35
Maintainers
wf18276861941Readme
简体中文 | English
Avatar-Clipper Lightweight avatar cropping tool
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
Experience
🎉 Official website experience address
🔗 Alternate address: stackblitz
Event
| 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
| 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 | 无 |
Guidelines for operating background images
- 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)
Notice on Cross Domain Image Request
// 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.