@media-editor/image

框架无关图片编辑器运行时。内部封装 React、ReactDOM 和 Filerobot，业务应用不需要自己安装或改造图片编辑器内部 UI。

安装

pnpm add @media-editor/image @media-editor/styles

使用

import { mountImageEditor } from '@media-editor/image';
import '@media-editor/image/style.css';
import '@media-editor/styles/theme.css';
import '@media-editor/styles/filerobot.css';

const handle = mountImageEditor(el, {
  source: fileOrUrl,
  locale: 'zh',
  theme: 'auto',
  onSave: async (result, designState) => {
    await saveImageToYourApp(result, designState);
  },
});

handle.update({ source: nextFileOrUrl });
handle.destroy();

Lazy

import { mountImageEditorLazy, preloadImageEditor } from '@media-editor/image/lazy';

preloadImageEditor();
await mountImageEditorLazy(el, options);

选项

• source: 图片 URL、File、Blob 或 data URL。
• locale: zh、en、es 或 zh-Hant。
• theme: auto、light 或 dark。
• fullscreen: false 可关闭内置全屏，也可传 { target, buttonContainer, mode }。
• onSave: 用户点击保存后的回调。
• onClose: 用户关闭编辑器后的回调。