commit 6014ee899adef6fb55a798ba7e769b3fda3f03aa Author: Mahdi Dibaiee Date: Tue Jan 6 21:40:15 2015 +0330 initial commit diff --git a/index.html b/index.html new file mode 100644 index 0000000..f8f79f6 --- /dev/null +++ b/index.html @@ -0,0 +1,17 @@ + + + + + Blur + + + + + + + + 1 + + + + \ No newline at end of file diff --git a/main.js b/main.js new file mode 100644 index 0000000..ae4a8b5 --- /dev/null +++ b/main.js @@ -0,0 +1,122 @@ +var $canvas = document.getElementById('c'), + img = document.images[0], + c = $canvas.getContext('2d'); + +// $canvas.width = window.innerWidth; +// $canvas.height = window.innerHeight; + +img.onload = function() { + c.drawImage(img, 0, 0); +} + +img.onload(); + +radius.onchange = function() { + rshow.textContent = radius.value; + setTimeout(function() { + c.drawImage(img, 0, 0); + for(var i = 0; i < +radius.value/5; i++) { + blur(5) + } + var modulo = +radius.value / 5; + if(modulo > 0) blur(modulo); + }, 100); +} + +function gaussian(x, max) { + return ( 1 / Math.sqrt(2*Math.PI) ) * Math.pow(Math.E, -x << 1 / 2); +} + +function blur(radius) { + var data = c.getImageData(0, 0, $canvas.width, $canvas.height), + width = data.width, + height = data.height, + pixels = data.data, + size = width*height*4, + result = c.createImageData(width, height); + + function fits(n) { + return n < size && n >= 0; + } + + for(var i = 0; i < size; i+=4) { + var n = i / 4; + var point = [pixels[i], pixels[i+1], pixels[i+2], pixels[i+3]]; + + var r = 0, + g = 0, + b = 0; + + var pixelsCount = 0; + + for(var j = 0; j < radius; j++) { + var left = i - j*4, + right = i + j*4, + up = i - width*4*(j+1), + down = i + width*4*(j+1); + + if(fits(left)) { + r += pixels[left]; + g += pixels[left + 1]; + b += pixels[left + 2]; + pixelsCount++; + } + + if(fits(right)) { + r += pixels[right]; + g += pixels[right + 1]; + b += pixels[right + 2]; + pixelsCount++; + } + + if(fits(up)) { + r += pixels[up]; + g += pixels[up + 1]; + b += pixels[up + 2]; + pixelsCount++; + } + + if(fits(up-4)) { + r += pixels[up - 4]; + g += pixels[up - 3]; + b += pixels[up - 2]; + pixelsCount++; + } + + if(fits(up+4)) { + r += pixels[up + 4]; + g += pixels[up + 5]; + b += pixels[up + 6]; + pixelsCount++; + } + + if(fits(down)) { + r += pixels[down]; + g += pixels[down + 1]; + b += pixels[down + 2]; + pixelsCount++; + } + + if(fits(down-4)) { + r += pixels[down - 4]; + g += pixels[down - 3]; + b += pixels[down - 2]; + pixelsCount++; + } + + if(fits(down+4)) { + r += pixels[down + 4]; + g += pixels[down + 5]; + b += pixels[down + 6]; + pixelsCount++; + } + } + + result.data[i] = r / pixelsCount; + result.data[i+1] = g / pixelsCount; + result.data[i+2] = b / pixelsCount; + result.data[i+3] = 255; + } + + c.putImageData(result, 0, 0); +} \ No newline at end of file diff --git a/test.jpg b/test.jpg new file mode 100644 index 0000000..e972a0e Binary files /dev/null and b/test.jpg differ