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

Example

[{"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"]]}]
kostasx

Flow Info

created 1 year ago

Node Types

Core
  • function (x2)
  • http in (x1)
  • http response (x1)
  • template (x1)
Other

Tags

  • image
  • analysis
  • face
  • detection
  • alchemy
Copy this flow JSON to your clipboard and then import into Node-RED using the Import From > Clipboard (Ctrl-I) menu option