69 lines
1.8 KiB
JavaScript
69 lines
1.8 KiB
JavaScript
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]);
|
|
}
|