<script type="text/html" data-help-name="annotate-image"> <p>A node that can annotate JPEG images with simple shapes and labels.</p> <h3>Inputs</h3> <dl class="message-properties"> <dt>payload<span class="property-type">Buffer</span></dt> <dd>A Buffer containing a JPEG image. Support for PNG will come soon.</dd> <dt>annotations<span class="property-type">Array</span></dt> <dd>An array of annotations to apply to the image. See below for details of the annotation format.</dd> </dl> <h3>Outputs</h3> <dl class="message-properties"> <dt>payload<span class="property-type">Buffer</span></dt> <dd>The image with any annotations applied.</dd> </dl> <h3>Details</h3> <p>The annotations provided in <code>msg.annotations</code> are applied in order. Each annotation is an object with the following properties:</p> <dl class="message-properties"> <dt>type<span class="property-type">string</span></dt> <dd><ul> <li><code>"rect"</code> - draws a rectangle</li> <li><code>"circle"</code> - draws a circle</li> </dd> <dt>x,y <span class="property-type">number</span></dt> <dd>The top-left corner of a <code>rect</code> annotation, or the center of a <code>circle</code> annotation.</dd> <dt>w,h <span class="property-type">number</span></dt> <dd>The width and height of a <code>rect</code> annotation.</dd> <dt>r <span class="property-type">number</span></dt> <dd>The radius of a <code>circle</code> annotation.</dd> <dt>bbox <span class="property-type">array</span></dt> <dd>This can be used instead of <code>x</code>,<code>y</code>,<code>w</code>,<code>h</code> and <code>r</code>. It should be an array of four values giving the bounding box of the annotation: <code>[x, y, w, h]</code>.<br> If this property is set and <code>type</code> is not set, it will default to <code>rect</code>.</dd> <dt>label <span class="property-type">string</span></dt> <dd>An optional piece of text to label the annotation with</dd> <dt>stroke <span class="property-type">string</span></dt> <dd>The line color of the annotation. Default: <code>"#ffC000"</code></dd> <dt>lineWidth <span class="property-type">number</span></dt> <dd>The stroke width used to draw the annotation. Default: <code>5</code></dd> <dt>fontSize <span class="property-type">number</span></dt> <dd>The font size to use for the label. Default: <code>24</code></dd> <dt>fontColor <span class="property-type">string</span></dt> <dd>The color of the font to use for the label. Default: <code>"#ffC000"</code></dd> <dt>labelLocation <span class="property-type">string</span></dt> <dd>The location to place the label. Can be set to <code>top</code> or <code>bottom</code>. Default: <code>"automatic"</code>.</dd> </dl> <h3>Examples</h3> <pre> msg.annotations = [ { type: "rect", x: 10, y: 10, w: 50, h: 50, label: "hello" }]</pre> <pre> msg.annotations = [ { type: "circle", x: 50, y: 50, r: 20 }]</pre> <pre> msg.annotations = [ { type: "rect", bbox: [ 10, 10, 50, 50] }]</pre> </script>