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, WEBP, BINARY 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 WEBP	MimeType `image/webp`	Options (Default) `webpQuality (1.0)` - Controls the desired output quality. 1.0 results in a special lossless encoding that usually produces smaller file sizes than PNG. Valid values are (0-1], higher means better quality.
Format BINARY	MimeType `application/octet-stream`	Options (Default) No additional options. This type returns the raw image data in RGBA8888 order in a blob.
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.
Format PDF	MimeType `application/pdf`	Options (Default) `exportPdfWithUnderlayer (false)` - An underlayer is generated by adding a graphics block behind the existing elements of the shape of the elements on the page.
Format PDF	MimeType `application/pdf`	Options (Default) `underlayerSpotColorName ("")` - The name of the spot color to be used for the underlayer's fill.
Format PDF	MimeType `application/pdf`	Options (Default) `underlayerOffset (0.0)` - The adjustment in size of the shape of the underlayer.

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. The supported export size limit can be queried with editor.getMaxExportSize(), the width and height should not exceed this value.

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 on Stackblitz or view the code on Github.


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

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

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

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();
  };
});