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.
jasnosc.js:
//Korekcja jasnosci //(c) 2011 by Tomasz Lubinski //www.algorytm.org /* Data of the image */ var imageData; /* make brightness corrections on loaded image */ function brightness(brightnessValue) { 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 = i + brightnessValue; if (newValue > 255) LUT[i] = 255; else if (newValue < 0) LUT[i] = 0; else LUT[i] = newValue; } // show LUT table showLUT(LUT); // make brightness 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; }