跳转到内容
EasyX

Image Toolkit 演示

@easyx/image-toolkit 的完整编辑流程演示：内容区 <ImageEditor> 直接嵌入页面，容器与下载动作都由演示页实现 —— 组件经 onResultChange 交回处理结果，页面据此渲染「下载最新结果」。源图由 canvas 现场生成，整条处理链路都在浏览器内完成。

图片编辑 演示

说明

Section titled “说明”
  • 文档站没有服务端，源图可由 canvas 现场生成（提供四类特性各异的样张），也可选择本地图片；加载与处理均发生在浏览器
  • 页面加载后即会下载并实例化 wasm 引擎（gzip 后约 5.3 MiB），界面会给出分阶段进度；之后的调用直接复用实例
  • 保存动作属于宿主：组件不渲染保存 / 取消按钮，只负责编辑与预览；演示页用 onResultChange 拿到结果后渲染「下载最新结果」，并保留最近几次产物的缩略图与体积变化
  • 主题随文档站 data-theme 自动判定，无需额外配置

库能力

Section titled “库能力”
  • 裁切：自研裁切台 —— 裁切框可拖动、可拖四边与四角改尺寸，比例可选「自由」或预设；支持键盘（方向键移动，Shift + 方向键改尺寸），工具栏内「取消裁切 / 应用裁切」
  • 缩放：等比换算（锁比例、默认不放大、上下限钳制），预设档位与自定义宽高联动
  • 拖动对比：原图 ↔ 处理后同区域对齐，分隔线两侧永远是同一块像素
  • 格式转换：PNG / JPEG / WebP，质量与调色板颜色数可调
  • 无损优化：PNG / WebP / TIFF 逐像素无损重压缩，可叠加裁切
  • 自动预览：参数变化后防抖 500ms 触发，请求带序号、过期响应丢弃、处理中保留上一次结果