ComfyUI Node

Interactive Crop

Interactive Crop — drag a box on the image, get the crop and its coordinates

By marcoc2·Created 2 years ago·Updated 5 months ago· 1
Interactive Crop
    • image
    • mask
    • x
    • y
    • width
    • height
    image
    roi_width512
    roi_height512
    crop_x0
    crop_y0

    Cropping in ComfyUI is usually a numbers game: stare at pixel coordinates, type them into an INT widget, render, discover the crop is five pixels off, adjust, repeat. InteractiveCrop turns that into a visual thing - it shows the image on the node and lets you position a fixed-size crop region, then hands back the cropped image, a mask, and the exact coordinates.

    The key idea is the "ROI" (region of interest): you set a crop width and height, then move that box around the image until it's where you want it. For repetitive work - cropping every generation to the same size, framing subjects for training crops, or feeding a specific region into an inpaint pipeline - this is dramatically nicer than pixel-arithmetic by hand.

    How it works

    It behaves like LoadImage with a built-in crop. The image input is a file picker that reads from your input directory (with upload support), exactly like the built-in loader. You set roi_width and roi_height - the size of the crop box - and crop_x / crop_y - the position. A JavaScript extension renders the image with an interactive overlay so you can drag the box visually instead of guessing coordinates.

    The node then clamps the crop to the image bounds (it won't let you go off-canvas), cuts the region, and outputs it. The mask output is worth a closer look: it's the source's alpha channel inverted (1 − alpha), cropped to the same region. For a PNG with transparency - say a padded or cutout subject - that mask marks exactly where the pixels are transparent, which is what you need when pasting the crop back onto a full canvas with the placement geometry. If the source has no alpha at all, the mask comes back as an all-zero tensor.

    Inputs and outputs

    • image - pick or upload from your input folder.
    • roi_width / roi_height (default 512) - the crop box size.
    • crop_x / crop_y - the box position (driven by the drag interaction).

    Outputs: image (the crop), mask (matching white mask), and x, y, width, height (INT) - the final clamped geometry, so anything downstream that needs to paste the crop back knows exactly where it came from.

    Installing it

    Part of the AnotherUtils pack - and because it's an interactive node, restart matters:

    cd ComfyUI/custom_nodes
    git clone https://github.com/marcoc2/ComfyUI-AnotherUtils.git
    

    Restart ComfyUI fully (the JS extension only registers at startup), or install via ComfyUI Manager and restart. No extra dependencies.

    Gotchas

    The drag interaction lives in the frontend, so the node needs the pack's js directory intact - if you've messed with the install or are running a stripped copy, you'll get the widgets but no draggable overlay. Also, the interactive bit means it's a design-time node: the coordinates you settle on are baked into the widgets, and they travel with the workflow, but if you want a different crop per image in a batch, this isn't that node.

    One thing to watch: crop_x/crop_y default to 0,0, and the max values go up to 16384 - larger than most images. If you drag, release, and the crop snaps somewhere surprising, it's the clamping math keeping the box inside bounds, which is working as intended, not fighting you. For framed, repeatable crops, this is one of the friendlier crop nodes around.

    Categoryimage/processing

    Inputs (5)

    NameTypeDefaultDescription
    imageCOMBO1 options: example.png
    roi_widthINT5121–16384
    roi_heightINT5121–16384
    crop_xINT00–16384
    crop_yINT00–16384

    Outputs (6)

    NameTypeDescription
    imageIMAGE
    maskMASK
    xINT
    yINT
    widthINT
    heightINT