phundrak/univ.phundrak.fr
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

TP3 terminé

Browse Source
This commit is contained in:
Phuntsok Drak-pa 2018-10-13 01:28:32 +02:00
parent dde0bdd2dc
commit 4d5a2b0e43
11 changed files with 158 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
animation/index.html
View File

@ -19,6 +19,7 @@
<li><a href="../canvas/">Canvas</a></li> <li><a href="../canvas/">Canvas</a></li>
<li><a href="../button/">Button</a></li> <li><a href="../button/">Button</a></li>
<li><a class="active" href="../animation/">Animation</a></li> <li><a class="active" href="../animation/">Animation</a></li>
<li><a href="../edit-image/">Édition d’Image</a></li>
</ul> </ul>
<div id="container"> <div id="container">
<div class="content"> <div class="content">

2
button/index.html
View File

@ -19,6 +19,8 @@
<li><a href="../faker/">Faker</a></li> <li><a href="../faker/">Faker</a></li>
<li><a href="../canvas/">Canvas</a></li> <li><a href="../canvas/">Canvas</a></li>
<li><a class="active" href="../button/">Button</a></li> <li><a class="active" href="../button/">Button</a></li>
<li><a href="../animation/">Animation</a></li>
<li><a href="../edit-image/">Édition d’Image</a></li>
</ul> </ul>
<div id="container" class="content"> <div id="container" class="content">
</div> </div>

2
canvas/index.html
View File

@ -19,6 +19,8 @@
<li><a href="../faker/">Faker</a></li> <li><a href="../faker/">Faker</a></li>
<li><a class="active" href="../canvas/">Canvas</a></li> <li><a class="active" href="../canvas/">Canvas</a></li>
<li><a href="../button/">Button</a></li> <li><a href="../button/">Button</a></li>
<li><a href="../animation/">Animation</a></li>
<li><a href="../edit-image/">Édition d’Image</a></li>
</ul> </ul>
<div id="container"> <div id="container">
<img src="../img/france_ardeche_landscape.jpg" alt="Vue d’Ardèche" id="ardeche" /> <img src="../img/france_ardeche_landscape.jpg" alt="Vue d’Ardèche" id="ardeche" />

11
css/edit-image.css Normal file
View File

@ -0,0 +1,11 @@
table {
margin: 20px auto;
width: 100%;
}
tr {
width: 33%;
}
th, td {
text-align: center;
}

62
edit-image/index.html Normal file
View File

@ -0,0 +1,62 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Button - Lucien Cartier-Tilet</title>
<meta name="author" content="Lucien Cartier-Tilet" />
<meta name="description" content="Page universitaire de Lucien Cartier-Tilet" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="initial-scale=1, user-scalable=yes, maximum-scale=5, width=device-width, height=device-height">
<link rel="stylesheet" type="text/css" href="../css/style.css">
<link rel="stylesheet" type="text/css" href="../css/canvas.css">
<link rel="stylesheet" type="text/css" href="../css/edit-image.css">
<script type="text/javascript" src="../js/edit-image.js"></script>
</head>
<body>
<ul class="navbar">
<li><a href="../">Home</a></li>
<li><a href="../square/">Square</a></li>
<li><a href="../faker/">Faker</a></li>
<li><a href="../canvas/">Canvas</a></li>
<li><a href="../button/">Button</a></li>
<li><a href="../animation/">Animation</a></li>
<li><a class="active" href="../edit-image/">Édition d’Image</a></li>
</ul>
<div id="container">
<div class="content">
<p>Édition de paramètres basiques en temps réel d’une image utilisateur.</p>
<input type="file" id="files" name="files[]" type="file" accept="image/*" />
<table>
<tr>
<th>
<p>Luminosité</p>
</th>
<th>
<p>Contraste</p>
</th>
<th>
<p>Saturation</p>
</th>
</tr>
<tr>
<td>
<input type="range" min="0" max="200" value="100" class="slider" id="rgnlum">
</td>
<td>
<input type="range" min="0" max="200" value="100" class="slider" id="rgncon">
</td>
<td>
<input type="range" min="0" max="200" value="100" class="slider" id="rgnsat">
</td>
</tr>
</table>
</div>
<div class="slidecontainer">
</div>
<canvas id="canvastp1" width="800" height="600"></canvas>
</div>
</body>
</html>

2
faker/index.html
View File

@ -19,6 +19,8 @@
<li><a class="active" href="../faker/">Faker</a></li> <li><a class="active" href="../faker/">Faker</a></li>
<li><a href="../canvas/">Canvas</a></li> <li><a href="../canvas/">Canvas</a></li>
<li><a href="../button/">Button</a></li> <li><a href="../button/">Button</a></li>
<li><a href="../animation/">Animation</a></li>
<li><a href="../edit-image/">Édition d’Image</a></li>
</ul> </ul>
<div class="container"> <div class="container">
<div class="content"> <div class="content">

BIN
favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.2 KiB

12
index.html
View File

@ -12,11 +12,13 @@
<body> <body>
<ul class="navbar"> <ul class="navbar">
<li><a class="active" href="./">Home</a></li> <li><a class="active" href="../">Home</a></li>
<li><a href="square/">Square</a></li> <li><a href="../square/">Square</a></li>
<li><a href="faker/">Faker</a></li> <li><a href="../faker/">Faker</a></li>
<li><a href="canvas/">Canvas</a></li> <li><a href="../canvas/">Canvas</a></li>
<li><a href="button/">Button</a></li> <li><a href="../button/">Button</a></li>
<li><a href="../animation/">Animation</a></li>
<li><a href="../edit-image/">Édition d’Image</a></li>
</ul> </ul>
<div class="container"> <div class="container">
<div class="content"> <div class="content">

2
js/animation.js
View File

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

68
js/edit-image.js Normal file
View File

@ -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]);
}

2
square/index.html
View File

@ -19,6 +19,8 @@
<li><a href="../faker/">Faker</a></li> <li><a href="../faker/">Faker</a></li>
<li><a href="../canvas/">Canvas</a></li> <li><a href="../canvas/">Canvas</a></li>
<li><a href="../button/">Button</a></li> <li><a href="../button/">Button</a></li>
<li><a href="../animation/">Animation</a></li>
<li><a href="../edit-image/">Édition d’Image</a></li>
</ul> </ul>
<div id="container"> <div id="container">
<div class="content"> <div class="content">