Core JavaScript

Image Processing

This JavaScript Reference section displays the code for an example program that shows how to perform image processing operations in JavaScript.

ImageProcessing.html

<!DOCTYPE html>
<html>
<head>
    <title>XoaX.net's Javascript</title>
</head>
<body>
  <canvas id="TheSource" style="border:15px solid #C08040;"></canvas>
  <br />
  <canvas id="TheDestination" style="border:15px solid #C08040;"></canvas>
  <script type="text/javascript" src="ImageProcessing.js"></script>
</body>
</html>

ImageProcessing.js

var qSrcCanvas		= document.getElementById("TheSource");
var qSrcContext		= qSrcCanvas.getContext("2d");

var qDestCanvas		= document.getElementById("TheDestination");
var qDestContext	= qDestCanvas.getContext("2d");

// Create an image element that we will not display.
var qSrcImage		= new Image();
qSrcImage.onload	= OnImageLoad;
qSrcImage.src		= "PrincessOlga.jpg";

function OnImageLoad() {
	var iWidth			= qSrcImage.width;
	var iHeight			= qSrcImage.height;

	qSrcCanvas.width	= iWidth;
	qSrcCanvas.height	= iHeight;
	qSrcContext.drawImage(qSrcImage, 0, 0);

	qDestCanvas.width	= iWidth;
	qDestCanvas.height	= iHeight;

	// This must be run via a web server to avoid the security issues.
	// Running it locally causes cross-origin security issues.
	var qSourceImageData	= qSrcContext.getImageData(0, 0, iWidth, iHeight);
	var qDestImageData		= qDestContext.createImageData(iWidth, iHeight);
	MakeNegative(qSourceImageData, qDestImageData);
	qDestContext.putImageData(qDestImageData, 0, 0);
}


function MakeNegative(qSrcImageData, qDestImageData) {
	for (var i = 0; i < qSrcImageData.data.length; i += 4) {
		// Reverse the color of the pixels
		qDestImageData.data[i]		= 255 - qSrcImageData.data[i];
		qDestImageData.data[i+1]	= 255 - qSrcImageData.data[i+1];
		qDestImageData.data[i+2]	= 255 - qSrcImageData.data[i+2];
		qDestImageData.data[i+3]	= 255;
	}
}
 

Output

 
 

© 2007–2025 XoaX.net LLC. All rights reserved.