ImgOps Node

The ImgOps node handles deterministic image processing — layering several images into one, resize, rotate, format-convert, generate favicon and app-icon sets, edge-detect, watermark, strip metadata, and a set of OpenCV operations: clean edge maps, thresholding, and shape/contour detection that measures the image and returns exact counts and geometry. It's the algorithmic sibling to the Vision node, which handles AI-driven image work.

Think of it this way: if the operation has a single right answer (resize to 512×512, convert to WebP, generate iOS app icons), use ImgOps. If the operation needs a model (read this handwriting, describe the scene, remove the background intelligently), use Vision.

Quick start

1. Drop an ImgOps node onto the canvas.
2. Wire an image upstream — from an Image node, a Files node iteration, a Vision node, or any node that produces an image.
3. Open the config panel and pick an operation. They're grouped:
   • Compose — layers: stack several images into one picture
   • Geometry — resize, rotate, flip, crop
   • Format — convert PNG / JPG / WebP / AVIF / HEIC, strip metadata
   • Filter — edge detection, watermark, Canny edges, threshold
   • Detect (OpenCV) — find contours, detect shapes
   • Asset Set — favicon set (web), app icon set (iOS / Android)

The node shows a live preview as you change settings. When the upstream image is ready, the result is one click away — a single image (with a Download button beside the preview), a collection of files (Download as ZIP), or — for the Detect operations — a list of measurements with an annotated preview (Download as JSON).

Engines

ImgOps runs in several tiers depending on where you are:

The default Auto setting picks the best available engine. On iPhone and iPad it uses the device's own engine for every operation it covers; elsewhere the OpenCV operations run in the browser. You can pin the engine to In-browser for predictable behaviour, or Circuit-accelerated to require the higher-quality path.

Operations

Compose

Layers stacks every image wired into the node into one picture — the kind of compositing you would otherwise do in a photo editor. Remove the background from a photo with the Vision node, then drop the cut-out onto a new background; put a logo in the corner of every product shot; lay a texture over a photo.

• Layer order — the image whose node sits highest on the canvas goes at the back, the lowest goes in front. In the config panel the layers are listed front first; the arrows bring a layer forward or send it backward, and the eye hides it.
• Canvas — the same size as the back layer, a ready-made size (square 1080 × 1080, portrait 1080 × 1350, story 1080 × 1920, wide 1920 × 1080, link preview 1200 × 630) or your own. Pick a background color, or keep it transparent.
• Background image — paste a link or upload a picture to sit behind every layer, filling the canvas or fitted inside it. A single cut-out plus a background image is all a "new background" needs.
• Per layer — size (fill the canvas, fit inside, or original size), position (center, a side or corner, or anywhere), scale, rotation, opacity and blend (normal, multiply, screen, overlay, darken, lighten, soft light, hard light, color dodge, color burn, difference, exclusion).
• Finishing — Shadow puts a soft shadow under a cut-out (softness, strength, offset and color). Soften edges feathers a hard cut-out edge. Match colors nudges the layer's color and brightness toward what is under it, so a subject looks lit by its new scene. Keep transparency is on by default, so a cut-out drops in cleanly; turn it off to use the layer as a solid rectangle.

The result is one image (PNG, keeping any transparency). On iPhone and iPad, Layers runs on the device.

Geometry

Format

Filter

Detect (OpenCV)

These operations measure the image instead of producing a new picture. They output a list of findings — counts, sizes, positions — plus an annotated preview with the detections drawn on top. The structured result flows downstream to a Sheet or Code node so you can filter, sort, or act on it.

Both Detect operations have a Draw detections on image toggle — on by default — that overlays the found regions on the preview so you can see what was matched at a glance.

iPhone and iPad

These operations appear in the list only in the Circuitry app on iPhone and iPad, and run entirely on the device — your photos never leave it. Feed them a photo from your library or any upstream image.

Opened on the web or desktop, a workflow that uses one of these keeps the operation, but that step only runs on an iPhone or iPad.

Asset Set (multi-output)

Inputs and outputs

Input

The node looks for an image on its incoming edge (Layers uses every incoming edge, one layer each), checking — in this order — value, image, __image__, imageData, processedImage, output. Any upstream node that publishes one of those with a data URL feeds ImgOps correctly.

Output

• Single-image ops → { type: 'image', imageData, value, width, height, mimeType, outputExt, outputMimeType }. The bytes are the actual converted image; outputExt and outputMimeType describe what's in imageData right now.
• Multi-output ops → { type: 'files', value: [{ name, content, mimeType, outputExt }, …], count, preset, totalBytes }. Each file's name includes its relative subdirectory (e.g. AppIcon.appiconset/icon-1024.png), so when you chain into a Save node the folder structure lands on disk correctly.
• Detect ops → { type: 'data', count, data, value, text, imageData? }. data (and its alias value) holds the structured findings — for Find Contours, { count, regions: [{ area, bbox, centroid }] }; for Detect Shapes, { count, tally, shapes: [{ shape, vertices, area, bbox }] }. text is the human-readable summary shown on the node, and imageData is the annotated preview when Draw detections is on. Wire data into a Sheet or Code node to work with the findings.

Format-intent flow

When you convert, say, a JPG into WebP, the actual bytes in the pipeline change — they become WebP bytes. outputExt becomes webp and outputMimeType becomes image/webp. The downstream Save node reads those hints and writes a .webp file with no extra configuration.

Example workflows

1. Put a cut-out on a new background

Image (portrait) ──▶ Vision (Remove Background) ──▶ ImgOps (Layers, background image: beach.jpg)

Vision cuts the person out; Layers puts the beach behind them. Turn on Shadow and set Match colors to about 40% on the cut-out for a natural look. To use a picture from the workflow as the background instead, wire a second Image node into Layers above the cut-out.

2. Generate a favicon set for a new site

Image (your logo) ──▶ ImgOps (Favicon Set) ──▶ Save (to project /public)

The Save node lands every file — PNGs, apple-touch-icon, favicon.ico, site.webmanifest — in your public folder with the right names. Or click the Download as ZIP button on the ImgOps node to grab the whole bundle without writing to disk.

3. Convert and downscale a folder of photos

Files (iterate /photos/*.jpg) ──▶ ImgOps (Resize 1600 longest-edge) ──▶ ImgOps (Convert WebP, quality 0.85) ──▶ Save

The two ImgOps nodes operate per-iteration. Save writes each result with .webp extension thanks to format-intent propagation.

4. iOS app icon set from a single 1024×1024 source

Image (icon-master.png) ──▶ ImgOps (App Icon Set, platform: iOS) ──▶ Save (to /ios/MyApp/Assets.xcassets)

Save preserves the AppIcon.appiconset/ subdirectory hierarchy. Drop the result into Xcode and you're done.

5. Strip EXIF before publishing

Image ──▶ ImgOps (Strip Metadata) ──▶ Save (to /public/uploads)

The re-encode drops EXIF (including GPS coordinates) without changing the visible image.

6. Edge map for an AI vision pipeline

Image ──▶ ImgOps (Canny Edges) ──▶ Vision (Describe Image)

Some vision models classify line drawings better than photos. The clean Canny edge map gives Vision a sharper input than a raw photo.

7. Count objects exactly and act on the result

Image ──▶ ImgOps (Threshold, Otsu) ──▶ ImgOps (Find Contours) ──▶ Sheet

Threshold first to get clean black-and-white regions, then Find Contours returns an exact count with every region's area and position. Feed the result into a Sheet to sort the largest items, or into a Condition node to branch on the count — a precise, repeatable measurement that doesn't depend on a model's estimate.

8. Turn a hand-drawn sketch into shapes

Image (whiteboard photo) ──▶ ImgOps (Detect Shapes) ──▶ Code (build a diagram)

Detect Shapes labels each region (square, circle, triangle…) with its position and size — a structured starting point for reconstructing a diagram or wireframe.

Tips

• Use Auto for the engine unless you need a specific behaviour. The node picks the best available path.
• Format conversion is eager — if you set the target to JPEG, the output is already JPEG bytes. Save and downstream nodes don't need to know what the original was.
• Subdirectories in multi-output ops are baked into each file's name — so Save and the Download ZIP button both respect the same structure.
• The Download button on the node is a shortcut. It downloads what the preview shows, without needing to wire a Save node — an image, a ZIP for asset sets, or a JSON file for the Detect operations.
• The first OpenCV operation in a session loads the OpenCV library (a one-time moment of "Loading…"). Every run after that is instant.
• Threshold before Detect. Find Contours and Detect Shapes are most accurate on clean black-and-white input — put a Threshold (Otsu) step in front when working from photos or noisy images.

Related

• Vision Node — AI-driven image work (OCR, describe, classify, remove background)
• Image Node — viewer + source for the workflow image bus
• Batch File & Image Processing — iterate over a folder of images
• Save Node — write ImgOps output to disk