JSFiddle - React, Tailwind, and code Playground

by tsdexter

HTML

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<img style="display: none" id="webcam"...

CSS

.rect {
    width: 80px;
    height: 80px;
    position: absolute;
    left: -1000px;
    top: -1000px;
  }

JavaScript

$(document).ready(function(){
    ctx = canvas.getContext('2d');
    image = document.getElementById('webcam');
    w = image.width;
    h = image.height;
	ctx.drawImage(image, 0, 0);
	var img = ctx.getImageData(0,0,w,h);    
    
    var pixels = {rows:[]};   
    var oldColor = -1;
    var row = -1;
    var group = 0;
    var wCount = 1;
    for(i=0; i < img.data.length; i+=4){
		
        //rows
        if(!(i % (w * 4))){
            group = 0;
            wCount = 1;
            row++;
        	pixels.rows[row] = {lines:[]};        
        }
        
        // pixel colours
		var r = img.data[i];
        var g = img.data[i+1];
        var b = img.data[i+2];
        var a = img.data[i+3];
        
        //set pixel group data
        var pixel = {};
        if(r > 127 && g > 127 && b > 127) {
            var color = 1;
        } else if (r < 127 && g < 127 && b < 127) {
            var color = 0;
        } else {
            var color = -1;
        }
        
        // start new group?
        if(oldColor == color){
            wCount += 1;
            pixel.width = wCount;                
        } else {
            wCount = 1;
            pixel.width = wCount;
            group++;
        }
        
        //set data
        pixel.color = color;
        pixels.rows[row].lines[group] = pixel;
        oldColor = color;
    }
    console.log(pixels);
    
    test = true;
    var img2 = img;
    var count = 0;
    _.each(pixels.rows, function(e, i, l){    
        var lineCount = 0;
    	_.each(l[i].lines, function(v, k, l2){			
			for(ii = 0; ii < v.width; ii++){                
                if(v.color == 0){
                	if(v.width >= 23){
                        var n1 = Math.round( l[i].lines[ii+lineCount+1].width / (v.width / 8) );
                        var n2 = Math.round( l[i].lines[ii+lineCount+2].width / (v.width / 8) );
                        var n3 = Math.round( l[i].lines[ii+lineCount+3].width / (v.width / 8) );
                    ...