Nadesłany przez Tomasz Lubiński, 28 listopada 2011 21:31
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.
sepia.js:
//Zamiana obrazu do sepii //(c) 2011 by Tomasz Lubinski //www.algorytm.org /* Data of the image */ var imageData; /* Convert image loaded into canvas to sepia */ function sepia(sepiaValue) { 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; // convert to sepia 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; val = 0.299*imageData.data[index+0] + 0.587*imageData.data[index+1] + 0.114*imageData.data[index+2]; if (val + 2 * sepiaValue > 255) { newImageData.data[index+0] = 255; } else { newImageData.data[index+0] = val + 2 * sepiaValue; } if (val + sepiaValue > 255) { newImageData.data[index+1] = 255; } else { newImageData.data[index+1] = val + sepiaValue; } newImageData.data[index+2] = val; newImageData.data[index+3] = 255; } } // copy the image data back onto the canvas ctx.putImageData(newImageData, 0, 0); } /* 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; }