Image Analysis: detect faces and draw a rectangle around each identified face
Node-red flow that analyses an image to find faces and then draws a colored rectangle around each face detected. If a person is identified, his name is also displayed next to the rectangle.
The image URL is entered via a GET request query parameter: http://mybluemix.net/image?url=http://domain.com/image.jpg
Dependencies: Alchemy Image Analysis Node
[{"id":"c13e71a4.2140f","type":"alchemy-image-analysis","z":"827af14d.00ceb","name":"","apikey":"","image-feature":"imageFaces","x":613.2777366638184,"y":56.91667556762695,"wires":[["58f81dc1.9a3694"]]},{"id":"d5585543.a71768","type":"http in","z":"827af14d.00ceb","name":"","url":"/image","method":"get","swaggerDoc":"","x":87.99999618530273,"y":42.916683197021484,"wires":[["70b7a96b.6005d8"]]},{"id":"5f27cb22.ca1404","type":"template","z":"827af14d.00ceb","name":"Results to Mustache","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<!-- CREATE person ELEMENTS THAT WILL OLD EACH IDENTIFIED PERSON'S DATA -->\n{{#payload.persons}}\n<person data-name=\"{{name}}\" data-x=\"{{x}}\" data-y=\"{{y}}\" data-width=\"{{width}}\" data-height=\"{{height}}\"></person>\n{{/payload.persons}}\n\n<style>#canvas{ height: 100%; } html, body { padding:0; margin: 0; }</style>\n\n<canvas id=\"canvas\" data-src=\"{{payload.url}}\"></canvas>\n\n<script>\nvar canvas = document.getElementById('canvas');\nvar persons = document.querySelectorAll('person');\nvar ctx = canvas.getContext(\"2d\");\nfunction randomHexcolor(){\n //http://www.paulirish.com/2009/random-hex-color-code-snippets/\n return '#'+Math.floor(Math.random()*16777215).toString(16);\n}\nvar imagePaper = new Image();\n imagePaper.src = canvas.getAttribute('data-src');\n imagePaper.onload = function(){\n canvas.width = imagePaper.width;\n canvas.height = imagePaper.height; \n ctx.drawImage( imagePaper, 0, 0, imagePaper.width, imagePaper.height );\n Array.prototype.slice.apply(persons).map(function(person){\n console.log(person);\n ctx.beginPath();\n var name = person.getAttribute('data-name');\n name = name || \"Unidentified\";\n var x = person.getAttribute('data-x'); \n var y = person.getAttribute('data-y');\n var width = person.getAttribute('data-width');\n var height = person.getAttribute('data-height');\n ctx.rect(x, y, width, height); // REF: https://goo.gl/yCLI9b\n ctx.lineWidth = 8;\n ctx.strokeStyle = randomHexcolor();\n ctx.stroke();\n // DISPLAY PESON'S NAME\n ctx.fillStyle = \"white\";\n ctx.font = \"30px Arial\";\n ctx.fillText(name,x,y-15); // REF: https://goo.gl/GOCtUI\n });\n };\n</script>","x":442.8888854980469,"y":228.69442749023438,"wires":[["a3924352.19221"]]},{"id":"a3924352.19221","type":"http response","z":"827af14d.00ceb","name":"","x":632.2221565246582,"y":240.58331966400146,"wires":[]},{"id":"58f81dc1.9a3694","type":"function","z":"827af14d.00ceb","name":"Results to JSON","func":"var resultsArray = msg.result;\nvar output = {\n \"url\" : msg.url,\n \"persons\" : []\n};\nresultsArray.map(function(person){\n var x = parseInt(person.positionX,10); \n var width = parseInt(person.width,10);\n var y = parseInt(person.positionY,10);\n var height = parseInt(person.height,10);\n output.persons.push({\n \"name\": (person.identity||{}).name,\n \"x\": x, \n \"y\": y,\n \"width\": width,\n \"height\": height\n }); \n});\nmsg.payload = output;\nreturn msg;","outputs":1,"noerr":0,"x":228.8888931274414,"y":200.47222805023193,"wires":[["5f27cb22.ca1404"]]},{"id":"70b7a96b.6005d8","type":"function","z":"827af14d.00ceb","name":"GET query?url -> msg.payload","func":"var fallbackImage = 'https://pbs.twimg.com/media/CfF9N_8UsAAjBdl.jpg';\n\nmsg.payload = msg.req.query.url || fallbackImage;\nmsg.payload = encodeURI(msg.payload);\nmsg.url = msg.payload;\n\nreturn msg;","outputs":1,"noerr":0,"x":331.66666412353516,"y":61.111141204833984,"wires":[["c13e71a4.2140f"]]}]
