Options

export(handle: DesignBlockId, mimeType?: MimeType, options?: ExportOptions): Promise<Blob>

exportWithColorMask(handle: DesignBlockId, mimeType: MimeType | undefined, maskColorR: number, maskColorG: number, maskColorB: number, options?: ExportOptions): Promise<Blob[]>

exportVideo(handle: DesignBlockId, mimeType: MimeType | undefined, progressCallback: (numberOfRenderedFrames: number, numberOfEncodedFrames: number, totalNumberOfFrames: number) => void, options: VideoExportOptions): Promise<Blob>

type VideoExportOptions = {
  h264Profile?: number;
  h264Level?: number;
  videoBitrate?: number;
  audioBitrate?: number;
  timeOffset?: number;
  duration?: number;
  framerate?: number;
  targetWidth?: number;
  targetHeight?: number;
  abortSignal?: AbortSignal;
};

getMaxExportSize(): number

getAvailableMemory(): number

import CreativeEngine from 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.51.0/index.js';

const config = {
  license: 'mtLT-_GJwMhE7LDnO8KKEma7qSuzWuDxiKuQcxHKmz3fjaXWY2lT3o3Z2VdL5twm',
  userId: 'guides-user',
  baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.51.0/assets',
};

const exportButton = document.getElementById('export_button');

const scene = engine.scene.get();
const page = engine.scene.getCurrentPage();

const sceneBlob = await engine.block.export(scene, 'application/pdf');

const pageBlob = await engine.block.export(page, 'image/png');

const [image, mask] = await engine.block.exportWithColorMask(
  page,
  'image/png',
  0.5,
  0.5,
  0.5,
);

if (groupable) {
  const group = engine.block.group([member1, member2]);
  const groupBlob = await engine.block.export(group, 'image/png');
}

const blockBlob = await engine.block.export(block, 'image/jpeg', {
  /**
   * The JPEG quality to use when encoding to JPEG.
   *
   * Valid values are (0-1], higher means better quality.
   * Ignored for other encodings.
   *
   * @defaultValue 0.9
   */
  jpegQuality: 0.9,
  /**
   * The PNG compression level to use, when exporting to PNG.
   *
   * Valid values are 0 to 9, higher means smaller, but slower.
   * Quality is not affected.
   * Ignored for other encodings.
   * @defaultValue 5.
   */
  pngCompressionLevel: 5,
  /**
   * An optional target width used in conjunction with target height.
   * If used, the block will be rendered large enough, that it fills the target
   * size entirely while maintaining its aspect ratio.
   */
  targetWidth: null,
  /**
   * An optional target height used in conjunction with target width.
   * If used, the block will be rendered large enough, that it fills the target
   * size entirely while maintaining its aspect ratio.
   */
  targetHeight: null,
});

// Video Export

const progressCallback = (renderedFrames, encodedFrames, totalFrames) => {
  console.log(
    'Rendered',
    renderedFrames,
    'frames and encoded',
    encodedFrames,
    'frames out of',
    totalFrames,
  );
};
const videoOptions = {
  /**
   * Determines the encoder feature set and in turn the quality, size and speed of the encoding process.
   *
   * @defaultValue 77 (Main)
   */
  h264Profile: 77,
  /**
   * Controls the H.264 encoding level. This relates to parameters used by the encoder such as bit rate,
   * timings and motion vectors. Defined by the spec are levels 1.0 up to 6.2. To arrive at an integer value,
   * the level is multiplied by ten. E.g. to get level 5.2, pass a value of 52.
   *
   * @defaultValue 52
   */
  h264Level: 52,
  /**
   * The video bitrate in bits per second. The maximum bitrate is determined by h264Profile and h264Level.
   * If the value is 0, the bitrate is automatically determined by the engine.
   */
  videoBitrate: 0,
  /**
   * The audio bitrate in bits per second. If the value is 0, the bitrate is automatically determined by the engine (128kbps for stereo AAC stream).
   */
  audioBitrate: 0,
  /**
   * The time offset in seconds of the scene's timeline from which the video will start.
   *
   * @defaultValue 0
   */
  timeOffset: 0,
  /**
   * The duration in seconds of the final video.
   *
   * @defaultValue The duration of the given page.
   */
  duration: 10,
  /**
   * The target framerate of the exported video in Hz.
   *
   * @defaultValue 30
   */
  framerate: 30,
  /**
   * An optional target width used in conjunction with target height.
   * If used, the block will be rendered large enough, that it fills the target
   * size entirely while maintaining its aspect ratio.
   */
  targetWidth: 1280,
  /**
   * An optional target height used in conjunction with target width.
   * If used, the block will be rendered large enough, that it fills the target
   * size entirely while maintaining its aspect ratio.
   */
  targetHeight: 720,
};
const videoBlob = await engine.block.exportVideo(
  page,
  'video/mp4',
  progressCallback,
  videoOptions,
);

const maxExportSizeInPixels = engine.editor.getMaxExportSize();

const availableMemoryInBytes = engine.editor.getAvailableMemory();

CreativeEngine.init(config).then(async engine => {
  document.getElementById('cesdk_container').append(engine.element);

  await engine.addDefaultAssetSources();
  await engine.scene.loadFromURL(
    'https://cdn.img.ly/assets/demo/v1/ly.img.template/templates/cesdk_postcard_1.scene',
  );
  exportButton.removeAttribute('disabled');

  exportButton.onclick = async () => {
    /* Export scene as PNG image. */
    const scene = engine.scene.get();
    const mimeType = 'image/png';
    /* Optionally, the maximum supported export size can be checked before exporting. */
    const maxExportSizeInPixels = engine.editor.getMaxExportSize();
    /* Optionally, the compression level and the target size can be specified. */
    const options = {
      pngCompressionLevel: 9,
      targetWidth: null,
      targetHeight: null,
    };
    const blob = await engine.block.export(scene, mimeType, options);

    /* Download blob. */
    const anchor = document.createElement('a');
    anchor.href = URL.createObjectURL(blob);
    anchor.download = 'export.png';
    anchor.click();
  };
});