annotate-sharp

A node that can annotate JPEG, PNG or GIF images.

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

Run the following commands in your Node-RED user directory - typically ~/.node-red

npm install annotate-sharp

Usage

The JPEG, PNG or GIF image should be passed to the node as a Buffer object under the configured property, default = 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. Automatic if not provided
• fontSize (number) : the font size to use for the label. Automatic if not provided
• 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 property is not set it will default to automatic and place where there is more room.

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]
}]