Search Docs
Loading...
Skip to content

To PNG

Export CE.SDK designs as PNG images with lossless compression, alpha support, and configurable output dimensions.

5 mins
estimated time
GitHub

PNG (Portable Network Graphics) preserves transparency and uses lossless compression. It works well for graphics, UI elements, icons, logos, and other designs that need crisp edges or alpha channels.

This guide covers exporting a block to PNG, configuring compression, controlling output dimensions, and writing the exported bytes to app storage.

Export to PNG#

Use engine.block.export(...) with MimeType.PNG to export a page, scene, group, or any other design block. The method returns a ByteBuffer containing the encoded PNG data.

val pngData = engine.block.export(
    block = page,
    mimeType = MimeType.PNG,
)

Pass the page block when you want to export the current page, or pass another block ID to export a specific element.

Export Options#

PNG export supports options for compression, dimensions, and text rendering. Pass an ExportOptions instance when you need behavior other than the defaults.

Compression Level#

Set pngCompressionLevel from 0 to 9 to control the file size versus encoding speed trade-off. Higher values usually produce smaller files but take longer to encode. PNG remains lossless, so compression level does not change image quality.

val options = ExportOptions(pngCompressionLevel = 9)
val compressedPngData = engine.block.export(
    block = page,
    mimeType = MimeType.PNG,
    options = options,
)
  • 0 - No compression, fastest encoding
  • 5 - Balanced default
  • 9 - Maximum compression, slowest encoding

Target Dimensions#

Set targetWidth and targetHeight together to request a target size. CE.SDK preserves the block’s aspect ratio, scales the block until it fills the requested target, and derives the PNG dimensions from that scaled block. If the target aspect ratio differs from the block aspect ratio, one exported dimension can be larger than the requested value.

val options = ExportOptions(
    targetWidth = 1920F,
    targetHeight = 1080F,
)
val sizedPngData = engine.block.export(
    block = page,
    mimeType = MimeType.PNG,
    options = options,
)

Leave both values unset when you want to export the block at its native size.

All PNG Export Options#

Option Description
pngCompressionLevel Compression level from 0 to 9. Higher values produce smaller files but take longer. Defaults to 5.
targetWidth Target output width in pixels. Use it together with targetHeight.
targetHeight Target output height in pixels. Use it together with targetWidth.
allowTextOverhang When true, text blocks export with glyphs that extend beyond their frame still visible. Defaults to false.

Save to App Storage#

After export, write the returned ByteBuffer to a file in your app-specific storage or pass it to your upload pipeline. The sample duplicates the buffer before writing so the original export data remains readable.

suspend fun savePngExportToFile(
    pngData: ByteBuffer,
    outputFile: File,
): File = withContext(Dispatchers.IO) {
    outputFile.parentFile?.mkdirs()


    FileOutputStream(outputFile).channel.use { channel ->
        val readableData = pngData.asReadOnlyBuffer()
        while (readableData.hasRemaining()) {
            channel.write(readableData)
        }
    }


    check(outputFile.length() > 0L) { "saved PNG file is empty" }
    outputFile
}

Use an Android app-owned directory such as context.cacheDir or context.filesDir for local exports, then share or upload the file according to your app’s storage policy.

When to Use PNG#

PNG is a good fit for:

  • Graphics with sharp edges, text, and UI elements
  • Designs that require transparent areas
  • Logos, icons, and illustrations where lossless output matters

For photographs or images with smooth gradients, JPEG usually produces smaller files.

Troubleshooting#

Issue Fix
File size is too large Increase pngCompressionLevel toward 9, or reduce dimensions with targetWidth and targetHeight.
Encoding feels slow Lower pngCompressionLevel toward 0. The default 5 balances size and encoding speed.
Output dimensions are unexpected Check the block aspect ratio against targetWidth and targetHeight. CE.SDK preserves the block aspect ratio and can export one dimension larger than the requested target when the ratios differ.
Transparent areas appear filled Check the exported page or block background. PNG preserves alpha only when the source content is transparent.

API Reference#

API Description
engine.block.export(block=_, mimeType=MimeType.PNG, options=_) Export a block as PNG and return the encoded data as a ByteBuffer.
ExportOptions(pngCompressionLevel=_, targetWidth=_, targetHeight=_, allowTextOverhang=_) Configure PNG compression, output dimensions, and text-overhang handling.

Next Steps#