Frontend

Hello everyone, we are going to look at how to detect faces from images using regular Javascript, HTML Canvas and OpenCV library. Let's look at some examples first then we will proceed to code and it's explanation Single Face detection Demo MultiFace Demo If you need to see the full codebase just got my github repo  https://github.com/reactcodes/face-detection-javascript-opencv If you have not done opencv setup kindly visit  https://docs.opencv.org/3.4.0/d4/da1/tutorial_js_setup.html Now lets understand the code : I have taken a HTML template where I have my Sample img container and then I have 2 html canvas in a different div <div class="container" > <div id="background" class="o_image" > <img id="sample" src="sample_2.jpg" alt="facedetection" /> <span> ©reactcodes blog </span> </div> <div cl...

In case you missed Part 1, follow this link below   Uploading file into azure blob storage using Azure Keyvault credentials with NodeJS and React - Part 1 So now let's create the UI using reactJS.  Finished app looks like below screenshot, which only has an upload option, you may add other features and fields with validation as you need. Initiate a react app using command : create-react-app sample-azure-client-app Dependency for endpoint call : axios   install via npm i --save axios Create App component import React from 'react'; import UploadImage from './assets/upload.png' import axios from 'axios' const onChange = e => { const files = Array.from(e.target.files) const currentFile = files[0] const formData = new FormData() formData.append('file',currentFile) axios({ url:'http://localhost:3001/upload/file', method:'POST', params:null, data:formData, hea...

Hello everyone, in this article I will talk about how we can upload files into azure blob storage using azure keyvault credentials.   There are multiple ways we can connect to Azure Blob from a webapp(eg. react). Connecting to AzureBlob with static credential is possible directly from React App itself.  But when we are trying to get the credential stored in Azure Keyvault and using that credential to get access to blob storage then we will need a middle layer like Java or Node etc. Here I will show an end to end example . First I will create a node application and expose a service which can be called from React/Angular or any application which will allow user select files and upload them into blob storage directly. Lets get started : Here is the folder structure we have for the Node application. There are some dependencies we need to install before we begin.  My package.json now looks like this : {   "na...