<style>

body{
	background: #ffcc88;
	color: #00cc88;
	font-size: 30px;
}

#sel{
	font-size: 30px;
}

#rezolutie{
	background: #00cc88;
	color: #ffcc88;
	font-size: 30px;
	width: 150px;
}

#opt{
	background: #00cc88;
	color: #ffcc88;
	font-size: 30px;
}

#ok{
	background: #00cc88;
	color: #ffcc88;
	font-size: 30px;
}

#color{
	width: 25px;
	height: 25px;
}

</style>
<input type="file" id="sel"></input><br>
Rezoluția: <input type="number" id="rezolutie" value="240"></input><br>
<select id="opt">
<option value="2">Lin</option>
<option value="1">Tablă de șah</option>
</select>
Color<input type="checkbox" id="color"></input>
<button id="ok" onclick="start()">Start!</button><p>
<canvas id="orig"></canvas><p>
<canvas id="c"><canvas><p>
<a id="save" href="#" onclick="descarca()">Salvează</a>
<script>

function descarca(){
	var img = c.toDataURL("image/png");
	save.href = img;
	var tm = new Date();
	var calend = tm.toLocaleDateString().replaceAll(".", "-");
	var ceas = tm.toLocaleTimeString().replaceAll(":", "-");
	var timp = calend + " " + ceas;
	save.download = timp + ".png";
}

var w, h;

corig = orig.getContext("2d");
cc = c.getContext("2d");

var mat = {};

var matr = {};
var matg = {};
var matb = {};

function init(){
	c.width = w; c.height = h;
	orig.width = w; orig.height = h;
	
	for(var i=0; i<w; i++){
		mat[i] = {};
		
		matr[i] = {};
		matg[i] = {};
		matb[i] = {};
	}
	
	for(var y=0; y<h; y++){
		for(var x=0; x<w; x++){
			mat[x][y] = 0;
			
			matr[x][y] = 0;
			matg[x][y] = 0;
			matb[x][y] = 0;
		}
	}
}

function sah(){
	var dat = corig.getImageData(0, 0, w, h).data;
	
	for(var y=0; y<h; y++){
		for(var x=0; x<w; x++){
			var i = (w*y + x)*4;
			
			var r = dat[i];
			var g = dat[i+1];
			var b = dat[i+2];
			
			var lum = r*3/9+g*4/9+b*2/9;
			var nl = Math.round((mat[x][y]+lum)/255)*255;
			var err = nl - lum;
			
			mat[x][y] += lum;
			
			var coef = 1/16;
			
			if(x+1 < w){
				mat[x+1][y] -= err*7*coef;
			}
			if(x-1 >= 0 && y+1 < h){
				mat[x-1][y+1] -= err*3*coef;
			}
			if(y+1 < h){
				mat[x][y+1] -= err*5*coef;
			}
			if(x+1 < w && y+1 < h){
				mat[x+1][y+1] -= err*1*coef;
			}
			
			lum = mat[x][y];
			lum = Math.round(lum/255)*255;
			
			//desen
			cc.fillStyle="rgb("+lum+","+lum+","+lum/2+")";
			cc.fillRect(x, y, 1, 1);
		}
	}
}

function lin(){
	var dat = corig.getImageData(0, 0, w, h).data;
	
	for(var y=0; y<h; y++){
		for(var x=0; x<w; x++){
			var i = (w*y + x)*4;
			
			var r = dat[i];
			var g = dat[i+1];
			var b = dat[i+2];
			
			var lum = r*3/9+g*4/9+b*2/9;
			var nl = Math.round((mat[x][y]+lum)/255)*255;
			var err = nl - lum;
			
			mat[x][y] += lum;
			
			var coef = 1/56;
			
			if(x+1 < w){
				mat[x+1][y] -= err*9*coef;
			}
			if(x-1 >= 0 && y+1 < h){
				mat[x-1][y+1] -= err*7*coef;
			}
			if(y+1 < h){
				mat[x][y+1] -= err*9*coef;
			}
			if(x+1 < w && y+1 < h){
				mat[x+1][y+1] -= err*7*coef;
			}
			
			if(x+2 < w){
				mat[x+2][y] -= err*5*coef;
			}
			if(x+2 < w && y+1 < h){
				mat[x+2][y+1] -= err*3*coef;
			}
			if(x+2 < w && y+2 < h){
				mat[x+2][y+2] -= err*1*coef;
			}
			if(x+1 < w && y+2 < h){
				mat[x+1][y+2] -= err*3*coef;
			}
			if(y+2 < h){
				mat[x][y+2] -= err*5*coef;
			}
			if(x-1 >= 0 && y+2 < h){
				mat[x-1][y+2] -= err*3*coef;
			}
			if(x-2 >= 0 && y+2 < h){
				mat[x-2][y+2] -= err*1*coef;
			}
			if(x-2 >= 0 && y+1 < h){
				mat[x-2][y+1] -= err*3*coef;
			}
			
			lum = mat[x][y];
			lum = Math.round(lum/255)*255;
			
			//desen
			
			cc.fillStyle="rgb("+lum+","+lum+","+lum/2+")";
			cc.fillRect(x, y, 1, 1);
		}
	}
}

//color

function sahColor(){
	var dat = corig.getImageData(0, 0, w, h).data;
	
	for(var y=0; y<h; y++){
		for(var x=0; x<w; x++){
			var i = (w*y + x)*4;
			
			var r = dat[i];
			var g = dat[i+1];
			var b = dat[i+2];
			
			var nr = Math.round((matr[x][y]+r)/255)*255;
			var ng = Math.round((matg[x][y]+g)/255)*255;
			var nb = Math.round((matb[x][y]+b)/255)*255;
			
			var err = nr - r;
			var erg = ng - g;
			var erb = nb - b;
			
			matr[x][y] += r;
			matg[x][y] += g;
			matb[x][y] += b;
			
			var coef = 1/16;
			
			if(x+1 < w){
				matr[x+1][y] -= err*7*coef;
				matg[x+1][y] -= erg*7*coef;
				matb[x+1][y] -= erb*7*coef;
			}
			if(x-1 >= 0 && y+1 < h){
				matr[x-1][y+1] -= err*3*coef;
				matg[x-1][y+1] -= erg*3*coef;
				matb[x-1][y+1] -= erb*3*coef;
			}
			if(y+1 < h){
				matr[x][y+1] -= err*5*coef;
				matg[x][y+1] -= erg*5*coef;
				matb[x][y+1] -= erb*5*coef;
			}
			if(x+1 < w && y+1 < h){
				matr[x+1][y+1] -= err*1*coef;
				matg[x+1][y+1] -= erg*1*coef;
				matb[x+1][y+1] -= erb*1*coef;
			}
			
			r = matr[x][y];
			r = Math.round(r/255)*255;
			
			g = matg[x][y];
			g = Math.round(g/255)*255;
			
			b = matb[x][y];
			b = Math.round(b/255)*255;
			
			//desen
			cc.fillStyle="rgb("+r+","+g+","+b+")";
			cc.fillRect(x, y, 1, 1);
		}
	}
}

function linColor(){
	var dat = corig.getImageData(0, 0, w, h).data;
	
	for(var y=0; y<h; y++){
		for(var x=0; x<w; x++){
			var i = (w*y + x)*4;
			
			var r = dat[i];
			var g = dat[i+1];
			var b = dat[i+2];
			
			var nr = Math.round((matr[x][y]+r)/255)*255;
			var ng = Math.round((matg[x][y]+g)/255)*255;
			var nb = Math.round((matb[x][y]+b)/255)*255;
			
			var err = nr - r;
			var erg = ng - g;
			var erb = nb - b;
			
			matr[x][y] += r;
			matg[x][y] += g;
			matb[x][y] += b;
			
			var coef = 1/56;
			
			if(x+1 < w){
				matr[x+1][y] -= err*9*coef;
				matg[x+1][y] -= erg*9*coef;
				matb[x+1][y] -= erb*9*coef;
			}
			if(x-1 >= 0 && y+1 < h){
				matr[x-1][y+1] -= err*7*coef;
				matg[x-1][y+1] -= erg*7*coef;
				matb[x-1][y+1] -= erb*7*coef;
			}
			if(y+1 < h){
				matr[x][y+1] -= err*9*coef;
				matg[x][y+1] -= erg*9*coef;
				matb[x][y+1] -= erb*9*coef;
			}
			if(x+1 < w && y+1 < h){
				matr[x+1][y+1] -= err*7*coef;
				matg[x+1][y+1] -= erg*7*coef;
				matb[x+1][y+1] -= erb*7*coef;
			}
			
			if(x+2 < w){
				matr[x+2][y] -= err*5*coef;
				matg[x+2][y] -= erg*5*coef;
				matb[x+2][y] -= erb*5*coef;
			}
			if(x+2 < w && y+1 < h){
				matr[x+2][y+1] -= err*3*coef;
				matg[x+2][y+1] -= erg*3*coef;
				matb[x+2][y+1] -= erb*3*coef;
			}
			if(x+2 < w && y+2 < h){
				matr[x+2][y+2] -= err*1*coef;
				matg[x+2][y+2] -= erg*1*coef;
				matb[x+2][y+2] -= erb*1*coef;
			}
			if(x+1 < w && y+2 < h){
				matr[x+1][y+2] -= err*3*coef;
				matg[x+1][y+2] -= erg*3*coef;
				matb[x+1][y+2] -= erb*3*coef;
			}
			if(y+2 < h){
				matr[x][y+2] -= err*5*coef;
				matg[x][y+2] -= erg*5*coef;
				matb[x][y+2] -= erb*5*coef;
			}
			if(x-1 >= 0 && y+2 < h){
				matr[x-1][y+2] -= err*3*coef;
				matg[x-1][y+2] -= erg*3*coef;
				matb[x-1][y+2] -= erb*3*coef;
			}
			if(x-2 >= 0 && y+2 < h){
				matr[x-2][y+2] -= err*1*coef;
				matg[x-2][y+2] -= erg*1*coef;
				matb[x-2][y+2] -= erb*1*coef;
			}
			if(x-2 >= 0 && y+1 < h){
				matr[x-2][y+1] -= err*3*coef;
				matg[x-2][y+1] -= erg*3*coef;
				matb[x-2][y+1] -= erb*3*coef;
			}
			
			r = matr[x][y];
			r = Math.round(r/255)*255;
			
			g = matg[x][y];
			g = Math.round(g/255)*255;
			
			b = matb[x][y];
			b = Math.round(b/255)*255;
			
			//desen
			
			cc.fillStyle="rgb("+r+","+g+","+b+")";
			cc.fillRect(x, y, 1, 1);
		}
	}
}

//

function start(){
	var f = sel.files[0];
	var img = new Image();
	img.src = URL.createObjectURL(f);
	
	img.onload=function(){
		h = eval(rezolutie.value);
		var ratio = img.width / img.height;
		w = Math.round(ratio * h);
		init();
		
		corig.drawImage(img, 0, 0, w, h);
		var optiune = opt.value;
		if(optiune == 1){ //Tabla de sah
			if(!color.checked){
				sah();
			}
			else{
				sahColor();
			}
		}
		else{ //Lin
			if(!color.checked){
				lin();
			}
			else{
				linColor();
			}
		}
		
	}
}

</script>