Exporting Blocks

Exporting via the block.export endpoint allows fine-grained control of the target format. CE.SDK currently supports exporting scenes, pages, groups, or individual blocks in the PNG, JPEG, TGA, and PDF formats. To specify the desired type, just pass in the corresponding mimeType. Pass additional options in a mime-type specific object:

Format	MimeType	Options (Default)
Format PNG	MimeType `image/png`	Options (Default) `pngCompressionLevel (5)` - The compression level is a trade-off between file size and encoding/decoding speed, but doesn't affect quality. Valid values are `[0-9]` ranging from no to maximum compression.
Format JPEG	MimeType `image/jpeg`	Options (Default) `jpegQuality (0.9)` - Directly influences the resulting files visual quality. Smaller = worse quality, but lower file size. Valid values are `(0-1]`
Format PDF	MimeType `application/pdf`	Options (Default) `exportPdfWithHighCompatibility (true)` - Increase compatibility with different PDF viewers. Images and effects will be rasterized with regard to the scene's DPI value instead of simply being embedded.

Certain formats allow additional configuration, e.g., options.jpegQuality controls the output quality level when exporting to JPEG. These format-specific options are ignored when exporting to other formats. You can choose which part of the scene to export by passing in the respective block as the first parameter.

For all formats, an optional targetWidth and targetHeight in pixels can be specified. If used, the block will be rendered large enough, that it fills the target size entirely while maintaining its aspect ratio.

Export details:

Exporting automatically performs an internal update to resolve the final layout for all blocks.
Only blocks that belong to the scene hierarchy can be exported.
The export will include the block and all child elements in the block hierarchy.
If the exported block itself is rotated it will be exported without rotation.
If a margin is set on the block it will be included.
If an outside stroke is set on the block it will be included except for pages.
Exporting a scene with more than one page may result in transparent areas between the pages, it is recommended to export the individual pages instead.
Exporting as JPEG drops any transparency on the final image and may lead to unexpected results.

Explore a full code sample of the integration on CodeSandbox or view the code on GitHub.

File:

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

const config = {
  baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.16.1/assets'
};

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

CreativeEngine.init(config, document.getElementById('cesdk_canvas')).then(
  async (instance) => {
    await instance.addDefaultAssetSources();
    await instance.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 = instance.scene.get();
      const mimeType = 'image/png';
      const options = { pngCompressionLevel: 9 };
      const blob = await instance.block.export(scene, mimeType, options);

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