This JavaScript Reference section displays the code for an example program that shows how to perform image processing operations in JavaScript.
<!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>
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; } }
© 20072024 XoaX.net LLC. All rights reserved.