univ.phundrak.fr/js/edit-image.js

69 lines
1.8 KiB
JavaScript
Raw Normal View History

2018-10-12 23:28:32 +00:00
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]);
}