Edit Image

Resize, crop, rotate, convert, compress or annotate an image, right in the browser.

What it does

Edit Image takes the image attached to the incoming item (under Binary Field, data by default), applies one edit, and puts the edited image back in the same place. Each node does one operation; chain several Edit Image nodes for several edits.

• Resize scales to Width (px) and/or Height (px). With Keep aspect ratio on (the default), giving one size works out the other, and giving both fits the image inside that box without distortion. Turn it off to stretch to exactly both sizes.
• Crop cuts out the rectangle at X, Y with size Width x Height. The rectangle must fit fully inside the image.
• Rotate turns the image clockwise by Degrees. 90, 180 and 270 keep the picture exact; other angles get a canvas large enough to hold the turned image.
• Convert format / compress saves the image as PNG, JPEG or WebP. Quality (0 to 1) applies to JPEG and WebP only: lower means a smaller file. PNG ignores it.
• Annotate (text or box) draws on the image: Text at X, Y in the chosen Color and Font, or a box outline at X, Y of size Width x Height with Line width.

When converting, the file keeps its name but gets the new extension (shot.png becomes shot.jpg). Other operations keep the source format; an image that is not PNG, JPEG or WebP is saved as PNG.

When to use it

• Crop a Screenshot Page capture to the part that matters before you share it.
• Shrink or compress an image before uploading it, for example to JPEG at quality 0.7.
• Add a label or a highlight box to a screenshot for a bug report.
• Rotate a photo that arrived sideways.

Inputs and settings

Einstellung	Typ	Was es bewirkt
Operation	Choice	The single edit to apply. Options: Resize, Crop, Rotate, Convert format / compress, Annotate (text or box). Standard: Resize
Binary Field	Text	The $binary slot the input image is read from and the result is written to. Standard: data
Width (px)	Number	Resize: target width. Leave empty to derive it from the height.
Height (px)	Number	Resize: target height. Leave empty to derive it from the width.
Keep aspect ratio	Toggle	Resize: fit inside the given box without distorting the image. Standard: On
X	Number	Crop/annotate: left offset in px.
Y	Number	Crop/annotate: top offset in px.
Width	Number	Crop/annotate box: width in px.
Height	Number	Crop/annotate box: height in px.
Degrees	Number	Rotate: clockwise angle (90/180/270 for right-angle turns). Standard: 90
Format	Choice	Convert: output image format. Options: PNG, JPEG, WebP. Standard: PNG
Quality (0-1)	Number	Convert/compress: 0..1, applies to JPEG and WebP only. Lower = smaller file.
Annotation	Choice	Annotate: draw text or a rectangle. Options: Text, Box. Standard: Text
Text	Text	Annotate (text): the text to draw.
Color	Text	Annotate: stroke/fill color (CSS color). Standard: #ff0000
Font	Text	Annotate (text): CSS font shorthand. Standard: 16px sans-serif
Line width	Number	Annotate (box): stroke width in px. Standard: 2

• Only the settings for the chosen Operation matter; the others are ignored.
• Positions are in pixels from the top-left corner. Empty X or Y means 0. For text, Y is the top of the letters.
• Color takes any web color: #ff0000, red or rgba(255,0,0,0.5). Font takes a size and a family, such as bold 24px sans-serif.

Outputs

• Output

Each output item has these fields:

Field	Typ	What it holds
$binary	Key-value pairs

Shape of an output item

{
  "$binary": {}
}

The item comes out with all its other fields unchanged and the edited image under the same Binary Field. Nodes that take a file, such as a Slack or Google Drive upload, pick it up through their Binary source setting (data by default).

Dependencies and credentials

None. This node needs no connection and has no slots for other nodes.

Example workflow

1. Screenshot Page captures the current tab as a PNG.
2. Edit Image with Operation Crop, X 0, Y 0, Width 1200, Height 600 keeps the top of the page.
3. A second Edit Image with Operation Convert format / compress, Format JPEG and Quality (0-1) 0.7 makes the file smaller.
4. Slack with File → Upload posts the image to a channel.

Common issues

• “No image found on $binary[“data”].“ The incoming item has no image under Binary Field. Connect a node that produces one, such as Screenshot Page, an Http Request that downloads an image, or Convert to File.
• “Crop rectangle is out of bounds: … does not fit inside the … image.” The rectangle runs past the edge. Reduce X, Y, Width or Height. The message shows the image’s real size.
• “Resize needs a width or a height (or both).”, “Crop needs a width (w) and a height (h).” or “Text annotation needs some text to draw.” Fill in the fields the chosen operation needs.
• “This image cannot be edited because it is cross-origin and taints the canvas…” The browser refuses to let the node read the image. Download the image with an Http Request node first and edit that copy.
• Quality seems ignored. It only affects JPEG and WebP. PNG never loses quality.

Related nodes

• Screenshot Page: capture a page to edit.
• Convert to File: turn a base64 image into a file Edit Image can read.
• Http Request: download an image to edit.
• Compression: gzip other kinds of files.