Meitu Design Studio: AI Commercial Photography Web SDK

# Install the SDK
npm i mt-image-editor-sdk

// Import the SDK module
import MTImageEditor, { MTImageEditorClass } from 'mt-image-editor-sdk';

// Multi-instance mode is supported starting from version 3.0.0
// Initialization is the same as in singleton mode
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({
  // Required: Authentication key obtained from the Meitu Open Platform
  accessKey: 'your_access_key',

  // Silent login key
  appKey: 'your_app_key',

  // Required: Specify the module to integrate
  moduleName: 'ai-commercial-photography-sdk',

  // Required when silent login is enabled; refer to the login documentation below
  // https://titan-h5.meitu.com/xiuxiu-pc/design-open/doc/美图产品(web)静默登录接入文档v0.1.pdf
  code: '',

  // Optional: SDK title
  title: 'Meitu Design Studio — AI Commercial Photography',

  // Optional: Mount node; if omitted, the SDK is displayed as a popup
  el: '',

  // Optional: Whether to enable the fullscreen feature
  fullscreen: true,

  // Optional: Whether to automatically resize on window.onresize
  resizeAble: true,

  // Additional business parameters (optional)
  extraInfo: {
    /**
     * [Optional parameter] Used for model try-on to specify the subfeatures to display.
     * If omitted or empty, all features will be displayed.
     * @type {Array<'model' | 'clothes' | 'wig'>}
     * - model: Model image
     * - clothes: Clothing image
     * - wig: Wig image
     */
    modelFunctionSet: ['model'],

    /**
     * [Optional parameter] The business module to open by default.
     * If omitted, the purchased feature module will open by default.
     * @type {'product' | 'portrait' | 'model' | 'clothes' | 'wig' | 'recolor'}
     */
    redirect: 'product',

    /**
     * [Optional parameter] The set of features to display.
     * If omitted or empty, all features will be displayed.
     * @type {Array<'product' | 'portrait' | 'model' | 'clothes' | 'wig' | 'recolor'>}
     */
    functionSet: ['product', 'portrait'],

    /**
     * [Optional parameter] Whether to prevent the default download event.
     * 0: Allow downloads; 1: Prevent downloads.
     */
    downloadPreventDefault: 1,

    /**
     * [Optional parameter] Custom text for the download button.
     */
    customDownloadText: 'Custom',

    /**
     * [Optional parameter] Callback for a failure to open an image.
     */
    onError: (data) => console.log('Failed to open image', data),
  },
});

//  Open the specified image by clicking a button
//  Additional business parameters can be passed to specify the module to open. If omitted, the business parameters configured during SDK initialization will be used
//  redirect: Has the same meaning as the redirect business parameter configured during SDK initialization
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('Image type:', type); // jpg | png
  console.log('Image data:', base64);
});

// AIGC task started
MTImageEditor.onAigcStart(({ taskId }) => {
  console.log('AI generation task started, taskId:', taskId);
});

// AIGC task completed
MTImageEditor.onAigcFinish(({ taskId, urls }) => {
  console.log('AI generation completed:', urls);
  // urls contains the Meitu CDN URLs of the resulting images; saving your own copies is recommended
});

MTImageEditor.openImage();  // Open the popup
MTImageEditor.close();      // Close the popup

MTImageEditor.onClose(() => {
  console.log('Popup closed');
});