Proyecto_Oller/scripts/msi.js

function getFore(foreground){
	var foreground = foreground.value;
	var source = 'images/' + foreground;
	document.getElementById("fore").innerHTML = foreground;
	document.getElementById("msi-fore").src = source;
}

function getBack(background){
	var background = background.value;
	var source = '\'url(images/' + background + ")\'";
	document.getElementById("back").innerHTML = source;
	document.getElementById("1").style.backgroundImage = "url('back.png')";

}

$(document).ready(function() {
    $("img").mousemove(function(event) {
        var x = event.pageX - this.offsetLeft;
        var y = event.pageY - this.offsetTop;
        //alert("X Coordinate: " + x + " Y Coordinate: " + y);
        var circle = 20*20*3.14;
        $('div.movestatus').text(circle);
        x += " " + y;
        $('div.back').text(x);
    });
});



function edit(){
// 	var c = document.getElementById("myCanvas");
//     var ctx = c.getContext("2d");
//     var img = document.getElementById("msi-fore");
//     ctx.drawImage(img, 0, 0);
//     var imgData = ctx.getImageData(0, 0, c.width, c.height);
//     // invert colors
//     var i;
//     for (i = 0; i < imgData.data.length; i += 4){
//     	document.getElementById("dimensions").innerHTML = i;
//     	if(i == x){
//         	imgData.data[i+3] = 0;
//         }
//     }
//     ctx.putImageData(imgData, 0, 0);
// };

// A. Buscar mejorar la extraccion de coordenadas de x y y.
// B. Carcular cada esquina del circulo
// C. dibujar la imagen

    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    var img = document.getElementById("msi-fore");
    ctx.drawImage(img, 0, 0);
    var imgData = ctx.getImageData(60, 60, 200, 200);
    // invert colors
    var i;
    for (i = 0; i < imgData.data.length; i += 4){
        
        if(i > 150000){
        	imgData.data[i+3] = 60;}

    }
    document.getElementById("dimensions").innerHTML = i;
    ctx.putImageData(imgData, 60, 60);
};

function clean(){
	document.getElementById("myCanvas").innerHTML = "<canvas></canvas>";
}