ImgOps Node

The ImgOps node handles deterministic image processing — 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:
   • 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. The OpenCV operations always run in the browser. You can pin the engine to In-browser for predictable behaviour, or EServer-accelerated to require the higher-quality path.

Operations

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.

Asset Set (multi-output)

Inputs and outputs

Input

The node looks for an image on its incoming edge, 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. 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.

2. 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.

3. 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.

4. 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.

5. 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.

6. 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.

7. 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
• Files Node — iterate over a folder of images
• Save Node — write ImgOps output to disk