🎯 Canva4PointSelector

The hard part of "put my design on that poster" was never the math. It's telling the computer where the poster is. This node is the part of ComfyUI-AffineImage that makes that step interactive: you drop an image on it, click four corners, and it hands those coordinates to its sibling PerspectiveScreenMapper for the actual warp.

It does no transforming on its own. Think of it as the input device for the transform - the mouse and the pointer are the whole job, and that's fine, because it's genuinely the fiddliest half of the workflow.

How it works

When you drag the node in, you get an interactive canvas overlaid on your reference image. The front-end here is recycled from KJNodes' point editor (the web/ folder pulls in kjweb_async scripts and the node even registers itself under the KJNodes/experimental category), so the controls feel familiar if you've used those:

• Shift + click drops a corner point, up to four
• drag any point to fine-tune its position
• right-click a point to delete it
• drag an image onto the node background to load the reference

Your clicks land in hidden coordinates / points_store widgets as JSON - you never type those by hand. On execution the backend parses them, clamps them to the real image bounds, builds a polygon selection_mask, and emits the result.

Inputs and outputs that matter

The only thing you truly touch is reference_image. The width and height inputs look like a resize but aren't - they define the coordinate space used only if you flip normalize on, which scales your clicks from that space up to the actual image dimensions. Default is off, and off is what you want.

The two outputs that matter:

• four_points - a JSON string of your four corners. This is the wire that goes straight into PerspectiveScreenMapper.
• selection_mask - a MASK of the quadrilateral, if you want the region downstream.

You also get point_info (a human-readable readout like "top-left: (x, y)") and a pass-through reference_image. Both are handy for debugging, neither is essential.

Installing it

This is the whole pack, so installing the selector installs the mapper too. Easiest is ComfyUI Manager - search for ComfyUI-AffineImage - or the manual route:

cd ComfyUI/custom_nodes/
git clone https://github.com/GuardSkill/ComfyUI-AffineImage.git
cd ComfyUI-AffineImage
pip install -r requirements.txt

Then restart ComfyUI. The README tells you to cd ComfyUI-Affine-Transform after cloning, which doesn't exist - the folder is named after the repo. Minor, but it's the kind of stale step that makes you re-read the README twice. Dependencies are just opencv-python, pillow, and numpy, so there are no model downloads and no heavy installs to babysit.

Where people get burned

• Order matters. The mapper assumes you clicked top-left → top-right → bottom-right → bottom-left. Click in a different order and your source image comes out rotated or mirrored relative to the quad.
• An empty four_points does nothing visible. The mapper doesn't error on missing points, it just passes the background through. If you run and nothing happens, the first thing to check is that you actually have four points set.
• Front-end changes need a browser refresh, not just a ComfyUI restart. If the canvas overlay never shows up, hard-refresh the browser tab before you suspect the install.

Small pack, narrow job, does it well. If you're building mockups or placing content onto surfaces in ComfyUI, this is the point where you stop guessing coordinates and start clicking them.