To Base64 - Node.js | IMG.LY Docs

Convert CE.SDK exports to Base64-encoded strings for storing in databases, transmitting via APIs, or embedding in HTML templates.

5 mins

estimated time

Download

StackBlitz

GitHub

Base64 encoding transforms binary image data into ASCII text, enabling you to store images in text-only databases, transmit them through JSON APIs, or embed them in HTML email templates.

import CreativeEngine from '@cesdk/node';
import { config } from 'dotenv';
import { writeFileSync, mkdirSync, existsSync } from 'fs';
import * as readline from 'readline';

config();

const OUTPUT_DIR = './output';

function prompt(question: string): Promise<string> {
  const rl = readline.createInterface({
    input: process.stdin,
    output: process.stdout
  });
  return new Promise((resolve) => {
    rl.question(question, (answer) => {
      rl.close();
      resolve(answer.trim().toLowerCase());
    });
  });
}

function showProgress(msg: string): () => void {
  const frames = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
  let i = 0;
  process.stdout.write(`${frames[0]} ${msg}`);
  const id = setInterval(() => {
    i = (i + 1) % frames.length;
    process.stdout.write(`\r${frames[i]} ${msg}`);
  }, 80);
  return () => {
    clearInterval(id);
    process.stdout.write(`\r✓ ${msg}\n`);
  };
}

const engine = await CreativeEngine.init({
  baseURL: `https://cdn.img.ly/packages/imgly/cesdk-node/${CreativeEngine.version}/assets`
});

try {
  let done = showProgress('Loading scene...');
  await engine.addDefaultAssetSources();
  await engine.scene.loadFromURL(
    'https://cdn.img.ly/assets/demo/v1/ly.img.template/templates/cesdk_postcard_1.scene'
  );
  done();

  const page = engine.block.findByType('page')[0];
  if (!page) throw new Error('No page found');

  console.log('\n┌───────────────────────────────────┐');
  console.log('│   Convert to Base64               │');
  console.log('├───────────────────────────────────┤');
  console.log('│   Scene loaded successfully.      │');
  console.log('│   Ready to export as PNG Base64.  │');
  console.log('└───────────────────────────────────┘\n');

  const confirm = await prompt('Export to Base64? (y/n): ');
  if (confirm !== 'y' && confirm !== 'yes') {
    console.log('\nExport cancelled.\n');
    process.exit(0);
  }

  if (!existsSync(OUTPUT_DIR)) mkdirSync(OUTPUT_DIR, { recursive: true });

  done = showProgress('Exporting to Base64...');

  const blob = await engine.block.export(page, {
    mimeType: 'image/png'
  });

  done();

  const buffer = Buffer.from(await blob.arrayBuffer());
  const base64 = buffer.toString('base64');
  const dataUri = `data:${blob.type};base64,${base64}`;

  writeFileSync(`${OUTPUT_DIR}/export.png`, buffer);
  writeFileSync(`${OUTPUT_DIR}/base64.txt`, dataUri);

  console.log(`\n✓ Saved: ${OUTPUT_DIR}/export.png`);
  console.log(`✓ Saved: ${OUTPUT_DIR}/base64.txt`);
  console.log(`  Binary: ${(blob.size / 1024).toFixed(1)} KB`);
  console.log(
    `  Base64: ${(dataUri.length / 1024).toFixed(1)} KB (~33% overhead)\n`
  );
} finally {
  engine.dispose();
}

Export a Block to Base64#

Use engine.block.export() to export a design block as a Blob, then convert it to a Base64 string.

const page = engine.block.findByType('page')[0];
const blob = await engine.block.export(page, {
  mimeType: 'image/png'
});

The export returns a Blob containing the rendered image. You then convert this Blob to a Base64 string using Node.js Buffer APIs.

Convert Blob to Base64#

Convert the exported Blob into a Base64 data URI using Node.js Buffer API.

const buffer = Buffer.from(await blob.arrayBuffer());
const base64 = buffer.toString('base64');
const dataUri = `data:${blob.type};base64,${base64}`;

The toString('base64') method encodes the buffer contents. Prepending the MIME type prefix (data:image/png;base64,...) creates a complete data URI ready for storage or transmission.

Save to File System#

Write both the binary image and Base64 text to the output directory.

writeFileSync(`${OUTPUT_DIR}/export.png`, buffer);
writeFileSync(`${OUTPUT_DIR}/base64.txt`, dataUri);

Saving both formats lets you compare file sizes and verify the Base64 encoding. The binary file is useful for visual inspection.

When to Use Base64#

Base64 encoding works well for:

Storing images in text-only databases like Redis or document stores
Transmitting images through JSON APIs that don’t support binary data
Embedding images in HTML email templates
Caching image data as strings in configuration files

Troubleshooting#

Base64 string too long — Use JPEG or WebP formats with lower quality settings. Reduce dimensions with targetWidth and targetHeight export options.

Memory issues with large images — Process images sequentially rather than in parallel. For very large exports, consider streaming approaches.

Corrupted output — Ensure the Buffer is created from the complete ArrayBuffer before encoding. Verify the Blob is fully loaded before conversion.

API Reference#

Method	Description
`engine.block.export(block, options)`	Export a block to a Blob with format options (`mimeType`, `jpegQuality`, `webpQuality`, `targetWidth`, `targetHeight`)
`engine.block.findByType(type)`	Find all blocks of a specific type
`engine.scene.loadFromURL(url)`	Load a scene from a remote URL
`engine.addDefaultAssetSources()`	Add default asset sources for resolution
`Buffer.from(arrayBuffer)`	Create a Buffer from ArrayBuffer (Node.js)
`buffer.toString('base64')`	Encode Buffer as Base64 string (Node.js)

Next Steps#

Export Options — Explore all available export formats and configuration
Export to PDF — Generate PDFs for print and document workflows
Partial Export — Export specific regions or individual elements
Size Limits — Handle large exports and memory constraints