msi.js

draft script for msi image manipulation

scripts/msi.js

@@ -0,0 +1,71 @@
+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>";
+}
+