@composy/image-editor-core

Professional image editor library with annotations, filters, crop, and more

功能特性

• 🚀 高性能核心引擎
• 🎨 TypeScript 类型完整
• 📦 支持 ESM / CJS 双格式输出

安装

npm install @composy/image-editor-core

快速开始

import {} from /* 需要的导出 */ '@composy/image-editor-core'

// 根据实际 API 使用

跨域导出

浏览器禁止导出被跨域图片污染的 canvas。默认 crossOrigin 为 anonymous，源站需要返回 CORS 响应头；如果源站不支持 CORS，请改用本地上传、data: URL 或同源 blob: URL。

import { Editor } from '@composy/image-editor-core'

const editor = new Editor({
  container: '#editor',
  image: 'https://third-party.example.com/a.jpg',
  crossOrigin: 'anonymous'
})

editor.setTool('move')

显式设置 crossOrigin: null 只适合预览无 CORS 图片，修改后的 canvas 不能导出。

异步加载与重置语义

• 同一个 Editor 连续调用 loadImage() 时，只有最后一次请求可以提交到画布；被新请求取代的旧 Promise 会以 AbortError 结束，不会再覆盖新图片或触发错误态。
• 调用 clearImage() 或 destroy() 会取消尚未完成的加载请求，避免异步回调在清空/销毁后重新写入画布。
• rotate()、flipHorizontal()、flipVertical()、crop() 和 resize() 只修改当前编辑结果，不会覆盖原始基线；reset() 会恢复原始像素和原始 backing dimensions。对于 crossOrigin: null 的污染画布，重置会使用原始图片重新绘制，但仍不能导出像素。

目录结构

packages/core/
├── src/              # 源码
├── package.json
├── tsconfig.json     # ESM 构建配置
└── tsconfig.cjs.json # CJS 构建配置

License

MIT

构建与检查

pnpm build
pnpm type-check
pnpm type-check:cjs
pnpm lint:check

Builder 配置位于 .ldesign/builder.config.ts，TypeScript 与 ESLint 配置也统一位于 .ldesign/。构建输出为 dist、es、esm 与 lib，并对应 package exports。 包根目录的配置文件仅作为兼容转发入口。