Nodes/WebApp API/Masked Image input
ComfyUI Node

Masked Image input

WebApp Masked Image input

By MonkeyProof-Solutions-BV·Created 6 months ago·Updated 3 months ago· 2
Masked Image input
  • image_in
  • mask_in
  • parent
  • Image
  • Mask
  • Order + 1
image_base64
mask_base64
order10
tooltip

This is the upload slot. Every web app that works on people's pictures needs the user to hand it an image, and often a mask to go with it - an inpainting app, a background-replacement app, a "paste this onto that" app. WebApp_MaskedImageinput is the ComfyUI_webapp node that defines that input: it accepts an image and a mask, from the app (as base64) or from your graph (wired directly), and outputs both as tensors ready for downstream nodes.

The pack's model applies as always: the node defines the control inside your workflow; a framework like Simian WebApps renders the actual upload UI and hands the data back. The README's example workflow is literally this node - it pastes a masked image onto one or more background images.

How it takes input

Three different routes, and the order matters:

  1. image_base64 (STRING) - base64-encoded image(s) as a JSON list of strings. This is what the app injects: "image_base64": ["<data>", "<data>"] for multiple images at once. Same idea for mask_base64.
  2. image_in (IMAGE) / mask_in (MASK) - wired connections. Use these when running the workflow inside ComfyUI; they pass through as-is.
  3. Nothing at all - in which case you get a dummy output: a 1×64×64 tensor of zeros. That's deliberate (so the graph stays valid), but it's also the easiest way to confuse yourself with a tiny black image. If you see one, you forgot to feed the node.

The mask logic has a nice fallback: if you provide an image but no mask, it derives one from the image's alpha channel (inverted), or a black mask if there's no alpha. So a PNG with transparency gets a usable mask for free.

Outputs

  • Image (IMAGE, a list) and Mask (MASK, a list) - wire these into your composite / inpainting / paste pipeline.
  • Order + 1 (INT) - the auto-sequence chain slot, same as every control.

The order (INT, default 10) input positions the upload control in its section, parent nests it under a WebApp_Grouping, and tooltip is hover text.

Installing it

cd ComfyUI/custom_nodes
git clone https://github.com/MonkeyProof-Solutions-BV/ComfyUI_webapp

Restart ComfyUI, or use ComfyUI Manager → search ComfyUI_webapp ("WebApp API"). No models, no API keys; dependencies are pillow and torch only - and it's pillow doing the base64→image work, so no heavy downloads either.

Gotchas

The dummy-image trap is the big one - an empty node does emit a tiny black image, so if your output looks wrong and you didn't wire anything in, that's why. The base64 fields are JSON lists, not plain strings: ["aGVsbG8="], not "aGVsbG8=", or the JSON parse fails. And the usual pack caveat: it's built on the newer backend node API (comfy_api.latest), so keep ComfyUI current.

Categoryapi/app

Inputs (7)

NameTypeDefaultDescription
image_base64STRINGBase64 encoded images specified as a json (list of) string(s).
mask_base64STRINGBase64 encoded masks specified as a json (list of) string(s).
orderINT10Control order in its section. Lowest value at the top. Highest at the bottom.
image_inoptIMAGE
mask_inoptMASK
parentoptPARENTWeb app parent to add the node to.
tooltipoptSTRINGWeb app control tooltip.

Outputs (3)

NameTypeDescription
ImageIMAGE
MaskMASK
Order + 1INTOrder number for the next control.