TP3 terminé

js/animation.js

@@ -35,7 +35,7 @@ function frame() {
     coordsx2 += change;
     Square.draw(coordsx, coordsy, '#f00');
     Square.draw(coordsx2, coordsy + 50, '#0f0');
-    if (coordsx2 > canvas.width - size || coordsx2 <= 0) {
+    if (coordsx2 > canvas.width - size || coordsx2 <= 1) {
         change = -change;
     }
     if (coordsx > canvas.width - size) {

js/edit-image.js

@@ -0,0 +1,68 @@
+window.onload = main;
+var canvas;
+var dgl_input;
+var rgnlum;
+var rgncon;
+var rgnsat;
+var img;
+var ratio;
+var topmargin;
+var leftmargin;
+var ctx;
+
+function main() {
+    console.log("JS Loaded");
+    canvas = document.getElementById("canvastp1");
+    dgl_input = document.getElementById('files');
+    dgl_input.addEventListener('change', handleFileSelect, false);
+    console.log("Event Listener added");
+    ctx = canvas.getContext('2d');
+    setRnglum();
+    setRngcon();
+    setRngsat();
+}
+
+function setRnglum() {
+    rgnlum = document.getElementById('rgnlum');
+    rgnlum.oninput = updateFilters;
+}
+
+
+function setRngcon() {
+    rgncon = document.getElementById('rgncon');
+    rgncon.oninput = updateFilters;
+}
+
+function setRngsat() {
+    rgnsat = document.getElementById('rgnsat');
+    rgnsat.oninput = updateFilters;
+}
+
+function updateFilters() {
+    ctx.filter =
+        'brightness(' + rgnlum.value + '%)' +
+        ' contrast(' + rgncon.value + '%)' +
+        ' saturate(' + rgnsat.value + '%)';
+    ctx.drawImage(img, 0, 0,
+        img.width, img.height,
+        leftmargin, topmargin,
+        img.width * ratio, img.height * ratio);
+}
+
+function handleFileSelect(e) {
+    var ctx = canvas.getContext('2d');
+    img = new Image;
+    img.onload = function() {
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        var hRatio = canvas.width / img.width;
+        var vRatio = canvas.height / img.height;
+        ratio = Math.min(hRatio, vRatio);
+        topmargin = (canvas.height - img.height * ratio) / 2;
+        leftmargin = (canvas.width - img.width * ratio) / 2;
+        ctx.drawImage(img, 0, 0,
+            img.width, img.height,
+            leftmargin, topmargin,
+            img.width * ratio, img.height * ratio);
+    };
+    img.src = URL.createObjectURL(e.target.files[0]);
+}