algorytm.org

Implementacja w JavaScript



Baza Wiedzy
wersja offline serwisu przeznaczona na urządzenia z systemem Android
Darowizny
darowiznaWspomóż rozwój serwisu
Nagłówki RSS
Artykuły
Implementacje
Komentarze
Forum
Bookmarki






Sonda
Implementacji w jakim języku programowania poszukujesz?

Zmiana kontrastu obrazu - Implementacja w JavaScript
Ocena użytkownikóww: *****  / 1
SłabyŚwietny
Nadesłany przez Tomasz Lubiński, 18 listopada 2011 20:00
Kod przedstawiony poniżej przedstawia główną część rozwiązania problemu.
Pobierz pełne rozwiązanie.

Jeżeli nie odpowiada Ci sposób formatowania kodu przez autora skorzystaj z pretty printer'a i dostosuj go automatycznie do siebie.

kontrast.js:
//Korekcja kontrastu
//(c) 2011 by Tomasz Lubinski
//www.algorytm.org

/* Data of the image */
var imageData;

/* make contrast corrections on loaded image */
function contrast(contrastValue)
{
	var canvas = document.getElementById("canvas");
	var ctx = canvas.getContext("2d");

	// read the width and height of the canvas
	var width = canvas.width;
	var height = canvas.height;
	
	// prepare LUT table
	var LUT = new Array(255);
	for (var i=0; i<256; i++)
	{
		var newValue = (contrastValue*(i-127)+127);
		if (newValue > 255)
			LUT[i] = 255;
		else if (newValue < 0)
			LUT[i] = 0;
		else
			LUT[i] = newValue;
	}
	
	// show LUT table
	showLUT(LUT);

	// make contrast correction
	var newImageData = ctx.createImageData(width, height);
	for (var i=0; i<height; i++)
	{
		for (var j=0; j<width; j++)
		{
			index = (i*width+j)*4;
			newImageData.data[index+3] = 255;
			newImageData.data[index+0] = LUT[imageData.data[index+0]];
			newImageData.data[index+1] = LUT[imageData.data[index+1]];
			newImageData.data[index+2] = LUT[imageData.data[index+2]];
		}
	}
	
	// copy the image data back onto the canvas
	ctx.putImageData(newImageData, 0, 0);	
}

/* draw chart with LUT values */
function showLUT(LUT)
{
	var lutCanvas = document.getElementById("lut_canvas");
	// clear previous
	lutCanvas.width = lutCanvas.width;
	var lutCtx = lutCanvas.getContext("2d");
	// draw texts
	lutCtx.font = "10pt Arial";
	lutCtx.fillStyle = "black";
	lutCtx.textBaseline = "top";
	lutCtx.textAlign = "center";
	lutCtx.fillText("LUT", 65, 10);
	lutCtx.font = "8pt Arial";
	lutCtx.fillText("0", 8, 120);
	lutCtx.fillText("255", 8, 0);
	lutCtx.fillText("0", 25, 140);
	lutCtx.fillText("255", 135, 140);
	// draw vertical arrow
	lutCtx.moveTo(20, 130);
	lutCtx.lineTo(20, 0);
	lutCtx.lineTo(17, 5);
	lutCtx.lineTo(20, 0);
	lutCtx.lineTo(23, 5);
	lutCtx.stroke();
	lutCtx.moveTo(20, 130);	
	// draw horizontal arrow
	lutCtx.moveTo(20, 130);
	lutCtx.lineTo(150, 130);
	lutCtx.lineTo(145, 133);
	lutCtx.lineTo(150, 130);
	lutCtx.lineTo(145, 127);
	lutCtx.stroke();
	// draw chart
	lutCtx.moveTo(20, 130);
	for (var i=0; i<256; i++)
	{
		lutCtx.lineTo(20+i/2, 130-LUT[i]/2);
	}
	lutCtx.stroke();
}

/* load image pointed by param_file to canvas */
function loadImage(imgSrc) 
{
	var canvas = document.getElementById("canvas");
	var ctx = canvas.getContext("2d");
	
	// add file:// if user specified local path
	if (imgSrc.indexOf("//") == -1 && imgSrc.indexOf(".") != 0) 
	{
		imgSrc = "file:///" + imgSrc;
	}
	
	// load file into canvas
	var img = new Image();
  	img.onload = function(){
		var width = img.width;
		var height = img.height;
 		canvas.width = width;
  		canvas.height = height;
    		ctx.drawImage(img,0,0);
		// replace transparent with white
		try 
		{
    			imageData = ctx.getImageData(0, 0, width, height);
  		} catch(e) 
  		{
  			netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
  			imageData = ctx.getImageData(0, 0, width, height);
  		}
		for (var i=0; i<height; i++)
		{
			for (var j=0; j<width; j++)
			{
				index = (i*width+j)*4;
				if (imageData.data[index+3] == 0)
				{
					imageData.data[index+3] = 255;
					imageData.data[index+0] = 255;
					imageData.data[index+1] = 255;
					imageData.data[index+2] = 255;
				}
			}
		}
  	}
  	img.src = imgSrc;
}
Dodaj komentarz