Simple Computer Vision with Javascript

Computer Vision with Javascript

John Keogh | August 31, 2015

I've been working on several robot platforms, and have been using Javascript as a scripting language for run-time and end-user programmability of the robot. One of the interesting things that an end user may need to do is to get the pixels from the current image sent by the robot to the browser, and use them for computer vision applications. This brief article describes how to get the pixels from an image, and how to iterate through them for a simple computer vision application that sees what number of pixels match a color.

The following video shows a demonstration of controlling a robot using Javascript that examines the images that are fed to the front end. The code that provides that functionality is provided and discussed below the video.

Algorithm

The images are initially loaded into a img tag (in the robot that occurs when a javascript request an image from the iOS device, for the example code, it occurs when the attribute of the img tag is changed to point to a different image).

Code

An example project is available which contains working code. The code is also shown below.

  
   //get the rgba matrix from a canvas
   function getCurrentImagePixels(){
       var currentImage=document.getElementById("image");
       var canvas=document.getElementById("canvas");
       canvas.width = currentImage.width;
       canvas.height = currentImage.height;
       var context = canvas.getContext("2d")
    
       context.drawImage(currentImage, 0, 0, currentImage.width, 
                         currentImage.height);
    
       var imgData=context.getImageData(0, 0, canvas.width, 
                         canvas.height);
    
       return imgData;
   }
   
   //this iterates through the pixels to find the number of red 
   //and yellow pixels
   function examinePixels(imgData){
      var redPixels = 0;
      var yellowPixels = 0;
      var totalPixels = 0;

      for (var i=0;igreen*2)&&(red>blue*2)&&(red>100)){
            redPixels++;
         }
         if((red>blue*2)&&(green>blue*2)&&(red>100)){
            yellowPixels++;
         }
         totalPixels++;
      }

      if(redPixels/totalPixels>0.3){
         return "Red object found";
      }
      else if(yellowPixels/totalPixels>0.3){
         return "Yellow object found";
      }
      return "No objects found";
   }

  
 

Blog

Computer Vision with Javascript

Make a VR Robot

Make a Robot controlled with EyesBot App

Simple Computer Vision with Javascript

Simple Obstacle Avoidance

Robots and Cassandra

Robotics: Controlling CIM Motors with Jaguar Motor Controllers using an Arduino

Building a Robot Controlled with an iPod - Easier Version

Simple Computer Vision with Web Services

Robot Reacting to Visual Stimulus

First Look at the MyRobots API

Calling Web Services from a Robot

Motion Detection and Tracking in C#

Building a Robot Controlled with an iPod - Part One

Building a Robot Controlled with an iPod - Part Two

Measure the Volume of Liquid in a Container using an Arduino and a Pressure Sensor

Applied Object Recognition

Robotics: How to Use an LED to Determine Distances

Communicating with an Arduino or Hardware from an iOS Device

Using NPN and PNP Transistors

Optimum Deployment of Vision Based Security Devices

Object Recognition

Applied Physical Computing

Eyesbot Company

Download EyesBot Driver Free!

EyesBot

EyesBot Company

Developers

EyesBot Blog