美图设计室：AI商拍WebSDK

# 安装 SDK
npm i mt-image-editor-sdk

// 导入 SDK 模块
import MTImageEditor, { MTImageEditorClass } from 'mt-image-editor-sdk';

// 从 3.0.0 版本开始，支持多实例（multi-instance）模式
// 初始化方式与单例模式相同
const MTEditor1 = new MTImageEditorClass();
MTEditor1.init({...});

<script src="https://public.static.meitudata.com/xiuxiu-pc/image-editor-sdk/3.0.0/dist/index.min.js"></script>

MTImageEditor.init({
  // 必填：在美图开放平台申请的鉴权密钥
  accessKey: 'your_access_key',

  // 静默登录 key
  appKey: 'your_app_key',

  // 必填：指定接入模块
  moduleName: 'ai-commercial-photography-sdk',

  // 启用静默登录时必填，参考下方登录文档
  // https://titan-h5.meitu.com/xiuxiu-pc/design-open/doc/美图产品(web)静默登录接入文档v0.1.pdf
  code: '',

  // 可选：SDK 标题
  title: '美图设计室 — AI 商拍',

  // 可选：挂载节点，不传则以弹窗形式展示
  el: '',

  // 可选：是否启用全屏功能
  fullscreen: true,

  // 可选：是否在 window.onresize 时自适应尺寸
  resizeAble: true,

  // 业务扩展参数（非必填）
  extraInfo: {
    /**
     * [可选参数] 模特试衣业务使用，指定要展示的子功能。
     * 若不传或为空，将展示全部功能。
     * @type {Array<'model' | 'clothes' | 'wig'>}
     * - model：模特图
     * - clothes：服装图
     * - wig：假发图
     */
    modelFunctionSet: ['model'],

    /**
     * [可选参数] 默认进入的业务模块。
     * 若未填写，默认进入所购买的功能模块。
     * @type {'product' | 'portrait' | 'model' | 'clothes' | 'wig' | 'recolor'}
     */
    redirect: 'product',

    /**
     * [可选参数] 要展示的功能集合。
     * 若不传或为空，将展示全部功能。
     * @type {Array<'product' | 'portrait' | 'model' | 'clothes' | 'wig' | 'recolor'>}
     */
    functionSet: ['product', 'portrait'],

    /**
     * [可选参数] 是否阻止下载默认事件。
     * 0：允许下载；1：阻止下载。
     */
    downloadPreventDefault: 1,

    /**
     * [可选参数] 自定义下载按钮文案。
     */
    customDownloadText: '自定义',

    /**
     * [可选参数] 图片打开失败的回调。
     */
    onError: (data) => console.log('图片打开失败', data),
  },
});

//  通过点击按钮，打开指定图片
//  可以传入额外的业务参数，来指定打开的模块，如未指定，会用初始化SDK时配置的业务参数
//  redirect：含义同初始化SDK时配置的业务参数redirect
MTImageEditor.openImage(URL, {
  redirect?: 'product' | 'model' | 'clothes' | 'wig' | 'recolor'
});

MTImageEditor.openImage([
  'https://xiuxiu-pro-pre.meitudata.com/ai_product/58494ab25ef237f9822a3bd1774b4ae3.jpeg',
  'https://xiuxiu-pro.meitudata.com/ai_material/static/13-ui.png',
  'https://xiuxiu-pro.meitudata.com/ai_material/static/33-ui.png',
  'https://xiuxiu-pro.meitudata.com/ai_material/static/4-ui.png',
]);

MTImageEditor.saveImage((base64, type) => {
  console.log('图片类型:', type); // jpg | png
  console.log('图片数据:', base64);
});

// AIGC 任务开始
MTImageEditor.onAigcStart(({ taskId }) => {
  console.log('AI 生成任务开始，taskId:', taskId);
});

// AIGC 任务完成
MTImageEditor.onAigcFinish(({ taskId, urls }) => {
  console.log('AI 生成完成:', urls);
  // urls 为结果图美图 CDN 地址，建议自行转存
});

MTImageEditor.openImage();  // 打开弹窗
MTImageEditor.close();      // 关闭弹窗

MTImageEditor.onClose(() => {
  console.log('弹窗已关闭');
});