@composy/image-editor-vue

@composy/image-editor-vue

Professional image editor library with annotations, filters, crop, and more（Vue 3 适配层）

功能特性

• 🧩 Vue 3 组件
• 🪝 组合式函数 (Composables)
• ⚡ 响应式数据绑定

安装

npm install @composy/image-editor-vue

快速开始

<script setup>
// import { /* 组件 */ } from '@composy/image-editor-vue'
</script>

<template>
  <ImageEditor />
</template>

跨域导出

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

<ImageEditor image="https://third-party.example.com/a.jpg" cross-origin="anonymous" />

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

加载与重置

Vue 组件通过 Core 复用异步加载语义：连续更新 image 或调用暴露的 loadImage() 时，旧请求会被取消，只有最后一次请求提交；被取消的请求以 AbortError 结束。调用 clearImage() 或卸载组件也不会让已失效的异步结果重新写入画布。旋转、翻转、裁剪和缩放后调用 reset() 会回到加载时的原始尺寸与像素基线。

目录结构

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

依赖

• @composy/image-editor-core — 核心引擎
• vue ^3.3.0 (peerDependency)

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。 包根目录的配置文件仅作为兼容转发入口。