diff --git a/animation/index.html b/animation/index.html index d1471a4..d063e56 100644 --- a/animation/index.html +++ b/animation/index.html @@ -19,6 +19,7 @@
  • Canvas
  • Button
  • Animation
    • +
  • Édition d’Image
    • diff --git a/button/index.html b/button/index.html index 0a31ce2..88eb5ce 100644 --- a/button/index.html +++ b/button/index.html @@ -19,6 +19,8 @@
  • Faker
  • Canvas
  • Button
    • +
  • Animation
    • +
  • Édition d’Image
    • diff --git a/canvas/index.html b/canvas/index.html index c45c1c3..e82d1fa 100644 --- a/canvas/index.html +++ b/canvas/index.html @@ -19,6 +19,8 @@
  • Faker
  • Canvas
  • Button
    • +
  • Animation
    • +
  • Édition d’Image
    • Vue d’Ardèche diff --git a/css/edit-image.css b/css/edit-image.css new file mode 100644 index 0000000..5a71eb6 --- /dev/null +++ b/css/edit-image.css @@ -0,0 +1,11 @@ +table { + margin: 20px auto; + width: 100%; +} + +tr { + width: 33%; +} +th, td { + text-align: center; +} diff --git a/edit-image/index.html b/edit-image/index.html new file mode 100644 index 0000000..90eaf87 --- /dev/null +++ b/edit-image/index.html @@ -0,0 +1,62 @@ + + + + + Button - Lucien Cartier-Tilet + + + + + + + + + + + + +
    +
    +

    Édition de paramètres basiques en temps réel d’une image utilisateur.

    + + + + + + + + + + + + +
    +

    Luminosité

    +     		+

    Contraste

    +     		+

    Saturation

    +
    + + + + + +
    +
    +
    + +
    + +
    + + + diff --git a/faker/index.html b/faker/index.html index b8484fa..ac49020 100644 --- a/faker/index.html +++ b/faker/index.html @@ -19,6 +19,8 @@
  • Faker
  • Canvas
  • Button
    • +
  • Animation
    • +
  • Édition d’Image
    • diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000..3b5fc42 Binary files /dev/null and b/favicon.ico differ diff --git a/index.html b/index.html index 97c9e92..5ca5631 100644 --- a/index.html +++ b/index.html @@ -12,11 +12,13 @@
    diff --git a/js/animation.js b/js/animation.js index f93c19b..384f12f 100644 --- a/js/animation.js +++ b/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) { diff --git a/js/edit-image.js b/js/edit-image.js new file mode 100644 index 0000000..d220aac --- /dev/null +++ b/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]); +} diff --git a/square/index.html b/square/index.html index 6662e0b..e00b661 100644 --- a/square/index.html +++ b/square/index.html @@ -19,6 +19,8 @@
  • Faker
  • Canvas
  • Button
    • +
  • Animation
    • +
  • Édition d’Image