Masked Image input
WebApp Masked Image input
- image_in
- mask_in
- parent
- Image
- Mask
- Order + 1
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:
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 formask_base64.image_in(IMAGE) /mask_in(MASK) - wired connections. Use these when running the workflow inside ComfyUI; they pass through as-is.- 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.
Inputs (7)
| Name | Type | Default | Description |
|---|---|---|---|
| image_base64 | STRING | Base64 encoded images specified as a json (list of) string(s). | |
| mask_base64 | STRING | Base64 encoded masks specified as a json (list of) string(s). | |
| order | INT | 10 | Control order in its section. Lowest value at the top. Highest at the bottom. |
| image_inopt | IMAGE | — | |
| mask_inopt | MASK | — | |
| parentopt | PARENT | Web app parent to add the node to. | |
| tooltipopt | STRING | Web app control tooltip. |
Outputs (3)
| Name | Type | Description |
|---|---|---|
| Image | IMAGE | — |
| Mask | MASK | — |
| Order + 1 | INT | Order number for the next control. |