Widgets/Transformer

Base64 To Image Widget

Base64 To Image Widget

A "Transformer" type widget. Base64 To Image Widget converts base64-encoded image strings into ImageData objects that can be used by other image processing widgets. It supports both raw base64 strings and complete data URLs, automatically handling the format detection.

 

Inputs

  • base64 (DataType: String, Anything) The base64-encoded image string to convert. Can be either:
    • A raw base64 string (will be treated as PNG format)
    • A complete data URL (e.g., data:image/png;base64,...)

Outputs

  • image (DataType: ImageData) The decoded image as an ImageData object, ready to be used by other image processing widgets.

Custom Settings

Resize Configuration

You can optionally configure the output image dimensions:

  • width (DataType: Number) Target width in pixels for the output ImageData object. If set, resizes the image to this width; if not, keeps the original width.

  • height (DataType: Number) Target height in pixels for the output ImageData object. If set, resizes the image to this height; if not, keeps the original height.


Resize Configuration

 

📌 Important Notes

  • Raw base64 strings are assumed to be PNG format
  • Data URLs must follow the format data:image/[format];base64,[data]
  • If resize dimensions are specified:
    • Both width and height must be provided
    • The aspect ratio is not preserved
    • For more control over resizing, use the Image Resize widget

 

Examples

Converting a Raw Base64 String

This example shows how to convert a raw base64-encoded PNG image


Drag the example onto the workspace to explore and experiment!



In this example:

  1. A raw base64 string is received through the base64 port
  2. The Base64 To Image widget:
    • Automatically prepends the PNG format header
    • Decodes the base64 string into an image
    • Creates an ImageData object with the decoded content
  3. The resulting ImageData is output through the image port, and displayed through the Display widget
  4. Since no resize settings were specified, the image maintains its original pixel dimensions

 

Using Data URL Format

This example demonstrates using a complete data URL with format specification


Drag the example onto the workspace to explore and experiment!



In this example:

  1. A complete data URL is received, including format specification (JPEG)
  2. The Base64 To Image widget:
    • Detects the format from the data URL
    • Decodes the base64 content
    • Creates an ImageData object preserving the image format
  3. The resulting ImageData is output with its original pixel dimensions and displayed through the Display widget

 

Resizing During Conversion

This example shows how to resize the image during conversion


Drag the example onto the workspace to explore and experiment!



In this example:

  1. The Base64 To Image widget is configured with specific output dimensions (width: 400, height: 400)
  2. When the base64 string is received:
    • The image is decoded
    • It's resized to the specified pixel dimensions (400x400)
    • The resized ImageData is output and displayed through the Display widget
  3. The aspect ratio is not preserved (use Image Resize widget for more control)

 

📌 Additional Notes

  • The widget automatically detects if the input is a raw base64 string or a data URL
  • Supported image formats depend on browser capabilities
  • The widget creates an internal canvas for processing
  • Error handling:
    • Invalid base64 strings are ignored
    • Failed image loading is logged to console
    • Non-string inputs are ignored

 

Glossary

  • Base64

    A binary-to-text encoding scheme that represents binary data in an ASCII string format using 64 different characters.

  • Data URL

    A URL scheme that allows data to be embedded directly in a web page, following the format data:[mediatype][;base64],<data>.

  • ImageData

    A JavaScript object that represents the underlying pixel data of an area of a canvas element, containing width, height, and pixel data.

  • PNG Format

    Portable Network Graphics, a raster-graphics file format that supports lossless data compression.