initial commit
This commit is contained in:
Mahdi Dibaiee
commit
6014ee899a
17
index.html
Normal file
17
index.html
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Blur</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<img src='test.jpg' style='display: none'>
|
||||||
|
<canvas id='c' width='600' height='400'></canvas>
|
||||||
|
|
||||||
|
<input type='range' min='1' max='50' value='1' id='radius'>
|
||||||
|
<span id='rshow'>1</span>
|
||||||
|
|
||||||
|
<script src='main.js'></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
122
main.js
Normal file
122
main.js
Normal file
@ -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);
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user