图像编辑器组件
ReactImageEditorCanvasFilters更新于 2026-08-14
使用场景: 为应用添加图像编辑:头像裁剪、照片滤镜、截图标注、上传前压缩与缩略图生成。
安装
npx skills add image-editor-components克隆
git clone https://github.com/skillhub-community/image-editor-components.git描述
全面的浏览器图像编辑器。核心工具:CropTool(自由/宽高比预设裁剪框、缩放适配、旋转翻转)、FilterPanel(20+ 预设滤镜——复古、黑白、暖调、冷调、鲜艳,外加亮度/对比度/饱和度/色彩平衡滑块,在 canvas 上实时应用)、AnnotateTool(箭头、矩形、圆形、自由画笔与文字标注,可配置描边/填充——截图标注的理想工具),以及 CompressTool(缩放并重新编码图像,带实时尺寸预览与质量滑块)。
所有工具都基于单源图像的 HTMLCanvas2D 流水线,带撤销/重做历史(最近 20 步)与并排前后对比。导出选项:PNG、JPEG、WebP 带质量控制,或自动求解目标压缩尺寸(如「200KB 以内」)。包含 CameraInput 助手(经 getUserMedia 从设备相机拍摄)与拖拽/剪贴板粘贴上传。框架轻量:每个工具都是独立组件,团队可按需组合。
AI Hub
跑 Skill 需要模型接口?
AI Hub 提供 OpenAI 兼容接口,给 Cursor / Claude Code / Agent 用。
打开 AI Hub元数据
作者@media_lin
许可证MIT
版本1.0.0
依赖0