Exporting Blocks
In this example, we will show you how to use the CreativeEditor SDK's CreativeEngine to export scenes, pages, groups, or individual blocks with the block
API.
Exporting allows fine-grained control of the target format and quality settings. CE.SDK currently supports exporting as PNG, JPEG, TGA, BIN, and PDF.
Setup#
This example uses the headless CreativeEngine. See the Setup article for a detailed guide.
To get started right away, you can also access the block
API within a running CE.SDK instance via cesdk.engine.block
.
Check out the APIs Overview to see that illustrated in more detail.
Functions#
Export a design block element, e.g., a scene, a page, a group, or a single block, as a file of the given mime type.
export(id: number, mimeType?: string, options?: ExportOptions): Promise<Blob>
exports a block into an imageBlob
.The
mimeType
argument is optional and defaults to"image/png"
. The following types are available:image/png
image/jpeg
application/octet-stream
provides the raw pixel data of the image (32-bit per pixel RGBA)application/pdf
In addition, you can control options for some mime types ```
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.
const sceneBlob = await engine.block.export(scene, 'application/pdf');const pageBlob = await engine.block.export(page, 'image/png');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});