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;
}

