From 4d5a2b0e43a4f0e980aa443054622b2728da5672 Mon Sep 17 00:00:00 2001 From: Phuntsok Drak-pa Date: Sat, 13 Oct 2018 01:28:32 +0200 Subject: [PATCH] =?UTF-8?q?TP3=20termin=C3=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- animation/index.html | 1 + button/index.html | 2 ++ canvas/index.html | 2 ++ css/edit-image.css | 11 +++++++ edit-image/index.html | 62 ++++++++++++++++++++++++++++++++++++++ faker/index.html | 2 ++ favicon.ico | Bin 0 -> 3262 bytes index.html | 12 ++++---- js/animation.js | 2 +- js/edit-image.js | 68 ++++++++++++++++++++++++++++++++++++++++++ square/index.html | 2 ++ 11 files changed, 158 insertions(+), 6 deletions(-) create mode 100644 css/edit-image.css create mode 100644 edit-image/index.html create mode 100644 favicon.ico create mode 100644 js/edit-image.js 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 0000000000000000000000000000000000000000..3b5fc42d61473ae51213a3ac697ea378983e4717 GIT binary patch literal 3262 zcmcgv`BPih6{f#;VzVO&=}AvdyO4ws2m}TskdOdLfHsh@Kx_iBufi7<^flQx}>(o5NwT z*(??-B_#zdgiIC-mBB!TMz{hWB zr}2SI0G^8>D5IBwd;~<5nFC$<#g?e9_{2o9TtVn|5ID>goa&lH~0gn%-KF%9!EXVa!l zzy}U&XR??OLL>SRM)w-DF&Q%x6B96m?TCww6NqInN+1-cYqUicD-4#(70D?Ki`@b3 zaWEh@mhQyGz4qE`G$-182F_wCI~6pd7V-If=mkEl6l4+-1Y#-47XZAzsjV*9nQt)m z42=bXodv}vx34ZYU*Fa}Xtq`a+PZVL=qZsn4r{C19ou;9zhDza|+E4U;o6+ z$n;`(*Z$l>V|AddqPkv{kzHzc@7Q~IV)pRV!YZoS=2B_2Hg|2g(~D^%GY3P%ldi^g ztG7W{T*ecKNIpgKd0-yB>`K%yhSbpZCjt&wRMZxE|AFi6a@`9GkiV;?{El` z!=+@(3{7^P!&^T&zw-Lw)1BcRGY5}1cl0kFTi<=)_@1S;*&}E699jeTzU4D>%ctG7 z4Z9as8oR@g@0eS*SNql3TZA$Nj}ic1DwT>*gd+O=nG&^`zom)71`Id^4t>BPkBQh4WVrY>JBS7zw+ zs_cA9oQ5+a5YQ%w#bQ_i{_^xJeTlWTd*J?~$4|fd`oqVc%pX}>I(cDc|7vwZJ3KJ4 zZ@G7TrgLOEylZiEX31UGx@Tc!e)-hm%G%urAAb7z7guiFa{1~r^9*vemdhjIAv_7d z$1dPxsxop~d%^&J{_@rLKmGjOj~ie9_pa1KGgJh)}R&o4GNbq;*< z;-@J7-3JdFrVh5uuD*N!!*8Dd&@;Tr*@IQb0*T&8Pi9$^u&B*1#9Y%~`6FgOh)@*lv|MC@Pg8Z)K)2_i?j;`U!)pKVq zT-29UO43x$x?pW=4k8gJap>7iL=jN()|DO)!!>>>LhX%;sD-% z9Dam17Kc!1bhuWY`qq2D{T=YX{c+>un^${QFLfTe(AXRHG`1I(IrlF~p@Z|0zr|sUxrokOHZ)0hdC)m~d#g~8k!yo@-wpJFDl$Tf6b&l^b zS9!+fRvNm)f&MYQ&0(!=a<%o>1bcOQ6a9)tLcdTft!nPGxcx;{zLH8$_v8ZT`8tML zho?LpLxH~W{Gt*|h4brY&z`^BKz;b}CmFf|O-^2Q+dy%pCpbRqZtW?na`#LhFjZAI z4()WdboqNma0Q?Msf9F6;b)<4!6PG06B9T;Puc>o3 zc36DP1*USqHiRdAtvzz3nnYZbDb(7$C!c-(?g#gLLp$q-#{c~E%hPXO5-ZdMUqFz2 zxl&mf=VyZH=b$w%7jHOw6GhZmAgAQ&S!UMsjBPfqd*X6&ye`)^gMc2e)?c(~` z%h#O#0J0xk90nZ)>A;Fr&?1s6^fp&zQ@1_XpO&r$L!3~tEX`0^BM?bakVYaHLr7;= zSO`UQV#k-r4OZu|Gv}|p|KQI3hhx(-I%6qcs)&Ho`6?E|&v*yWCwSaEi`^3F=1~-s zB4LOGNBXSN$2F23VHzf56|$XV2Er&IRcVSVJfqXEH+A*rl~^Sz4TLEOv`iMXfJSsV z+K5+4N+gOr%eYx=WGNtw#0D*`B62UF0(}f5A!h~-E0q*UmDzcyq)5UTi8LDgqb5WxMGGjj QpcJJI=D+-Z;Q#&mzux|8cmMzZ literal 0 HcmV?d00001 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