Canvas ImageData load and thresholding Image

Example Random Thresholding Image

by Niklas Knaack

JavaScript

var canvas = document.createElement( 'canvas' );
	canvas.width = 600;
	canvas.height = 400;
	
document.body.appendChild( canvas );

var context = canvas.getContext( '2d' );

function thresholdingImage( threshold ) {

	var imageData = context.getImageData ( 0, 0, 600, 400 );
    var data = imageData.data;

    for ( var i = 0, l = data.length; i < l; i += 4 ) {
    
    	var r = data[ i ];
		var g = data[ i + 1 ];
		var b = data[ i + 2 ];
        var a = data[ i + 3 ];
        
        var v = ( r + g + b ) / 3 >= threshold ? 255 : 0;
        
        data[ i ]     = v;
        data[ i + 1 ] = v;
        data[ i + 2 ] = v;
        data[ i + 3 ] = 255;

    }
    
    context.putImageData( imageData, 0, 0 );

}

var image = document.createElement( 'IMG' );
    image.onload = function () {
    
        context.drawImage( image, 0, 0 );
        
        //thresholdingImage( Math.round( Math.random() * 255 ) );
        thresholdingImage( Math.round( Math.random() * 155 ) + 50 );
        
    }
    image.crossOrigin = "anonymous";
	image.src = 'http://nkunited.de/ExternalImages/jsfiddle/pexels-photo-595879_mod_600x400.jpg';