node-red-nodes/utility/annotate-image

node-red-node-annotate-image

A Node-RED node that can annotate a JPEG image.

The node is currently limited to drawing rectangles and circles over the image. That can be used, for example, to annotate an image with bounding boxes of features detected in the image by a TensorFlow node.

Install

Either use the Edit Menu - Manage Palette option to install, or run the following command in your Node-RED user directory - typically ~/.node-red

npm install node-red-node-annotate-image

Usage

The JPEG image should be passed to the node as a Buffer object under msg.payload.

The annotations are provided in msg.annotations and are applied in order.

Each annotation is an object with the following properties:

• type (string) : the type of the annotation - rect or circle
• x/y (number) : the top-left corner of a rect annotation, or the center of a circle annotation.
• w/h (number) : the width and height of a rect annotation
• r (number) : the radius of a circle annotation
• bbox (array) : this can be used instead of x, y, w, h and r. It should be an array of four values giving the bounding box of the annotation: [x, y, w, h]. If this property is set and type is not set, it will default to rect.
• label (string) : an optional piece of text to label the annotation with
• stroke (string) : the line color of the annotation. Default: #ffC000
• lineWidth (number) : the stroke width used to draw the annotation. Default: 5
• fontSize (number) : the font size to use for the label. Default: 24
• fontColor (string) : the color of the font to use for the label. Default: #ffC000
• labelLocation (string) : The location to place the label. top or bottom. If this propery is not set it will default to automatic and make the best guess based on location.

Examples

msg.annotations = [ {
    type: "rect",
    x: 10, y: 10, w: 50, h: 50,
    label: "hello"
}]

msg.annotations = [
    {
        type: "circle",
        x: 50, y: 50, r: 20,
        lineWidth: 10

    },
    {
        type: "rect",
        x: 30, y: 30, w: 40, h: 40,
        stroke: "blue"
    }
]

msg.annotations = [ {
    type: "rect",
    bbox: [ 10, 10, 50, 50]
}]