Comparing Images in JavaScript

The JavaScript code below, when run, prompts the user to specify two image files and click a button to calculate the difference in intensity of their respective pixels. It is intended only as a simple early experiment in the field of optical character recognition.


<html>
<body>

<div id="divUI">

	<div>
		<label>Image 0:</label>
		<input id="inputFileImage0" type="file" onchange="inputFileImage0_Changed(this);"></input>
		<div id="divDisplayImage0"></div>
	</div>	

	<div>
		<label>Image 1:</label>
		<input id="inputFileImage1" type="file" onchange="inputFileImage1_Changed(this);"></input>
		<div id="divDisplayImage1"></div>
	</div>

	<div>
		<button onclick="buttonCompareImages_Clicked();">Compare Images</button>
	</div>

	<div>
		<label>Difference:</label>
		<div id="divDisplayDifference"></div>
		<input id="inputDifference"></input>
	</div>
</div>

<script type="text/javascript">

// ui events

function buttonCompareImages_Clicked()
{
	var divDisplayImage0 = document.getElementById("divDisplayImage0");
	var image0 = divDisplayImage0.getElementsByTagName("img")[0];

	var divDisplayImage1 = document.getElementById("divDisplayImage1");
	var image1 = divDisplayImage1.getElementsByTagName("img")[0];

	if (image0 == null || image1 == null)
	{
		alert("Images not yet loaded!");
	}
	else
	{
		var comparator = new ImageComparator();
		var differenceCanvasAndAmount = comparator.compareImages(image0, image1);

		var differenceCanvas = differenceCanvasAndAmount[0];
		var differenceAmount = differenceCanvasAndAmount[1];

		var divDisplayDifference = document.getElementById("divDisplayDifference");
		divDisplayDifference.appendChild(differenceCanvas);

		var inputDifference = document.getElementById("inputDifference");

		inputDifference.value = differenceAmount;
	}
}

function inputFileImage1_Changed()
{
	inputFileImageN_Changed(1);
}

function inputFileImage0_Changed()
{
	inputFileImageN_Changed(0);
}

function inputFileImageN_Changed(imageNumber)
{
	var input = document.getElementById("inputFileImage" + imageNumber);
	var divDisplay = document.getElementById("divDisplayImage" + imageNumber);

	var file = input.files[0];

	var fileReader = new FileReader();
	fileReader.onload = function(event)
	{
		var fileContentsAsDataURL = event.target.result;
		var imageLoaded = document.createElement("img");
		imageLoaded.src = fileContentsAsDataURL;
		divDisplay.appendChild(imageLoaded);
 	}

	fileReader.readAsDataURL(file);
}

// extensions

function CanvasRenderingContext2DExtensions()
{
	// extension class
}
{
	CanvasRenderingContext2D.prototype.pixelIntensityAtPos = function(pixelPos)
	{
		var imageDataForPixel = this.getImageData
		(
			pixelPos.x, pixelPos.y, 1, 1
		);

		var pixelComponentsAsUint8ClampedArray = imageDataForPixel.data;

		var pixelComponentsRGBA = 
		[
			pixelComponentsAsUint8ClampedArray[0],
			pixelComponentsAsUint8ClampedArray[1],
			pixelComponentsAsUint8ClampedArray[2],
			pixelComponentsAsUint8ClampedArray[3]
		];

		var returnValue = 
			(
				pixelComponentsRGBA[0]
				+ pixelComponentsRGBA[1]
				+ pixelComponentsRGBA[2]
			) 
			/ 3;

		return returnValue;
	}
}

// classes

function Coords(x, y)
{
	this.x = x;
	this.y = y;
}

function ImageComparator()
{
	// do nothing
}
{
	ImageComparator.prototype.compareImages = function(image0, image1)
	{
		var images = [ image0, image1 ];
		var graphicsContextsForImages = [];

		for (var i = 0; i < images.length; i++)
		{
			var image = images[i];
			var imageAsCanvas = document.createElement("canvas");

			imageAsCanvas.width = image.width;
			imageAsCanvas.height = image.height;			

			var graphicsContextForImage = imageAsCanvas.getContext("2d");
			graphicsContextForImage.drawImage(image, 0, 0);

			graphicsContextsForImages.push(graphicsContextForImage);
		}

		var graphicsForImage0 = graphicsContextsForImages[0];
		var graphicsForImage1 = graphicsContextsForImages[1];

		var imageSize = new Coords(image0.width, image0.height);

		var differenceAmountSoFar = 0;

		var canvasDifference = document.createElement("canvas");
		canvasDifference.width = imageSize.x;
		canvasDifference.height = imageSize.y;
		var graphicsDifference = canvasDifference.getContext("2d");

		var pixelPos = new Coords();

		for (var y = 0; y < imageSize.y; y++)
		{
			pixelPos.y = y;
			
			for (var x = 0; x < imageSize.x; x++)
			{
				pixelPos.x = x;

				var image0Pixel = graphicsForImage0.pixelIntensityAtPos(pixelPos);
				var image1Pixel = graphicsForImage1.pixelIntensityAtPos(pixelPos);

				var differenceOfPixels = Math.abs(image0Pixel - image1Pixel);

				differenceAmountSoFar += differenceOfPixels;

				graphicsDifference.fillStyle = 
					"rgb(" 
					+ differenceOfPixels + ", "
					+ differenceOfPixels + ", "
					+ differenceOfPixels
					+ ")";

				graphicsDifference.fillRect(x, y, 1, 1);
			}
		}

		return [canvasDifference, differenceAmountSoFar];
	}
}

</script>

</body>
</html>

Advertisements
This entry was posted in Uncategorized and tagged , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s