30 lines
820 B
JavaScript
30 lines
820 B
JavaScript
document.getElementById(`imageInput`).onchange = event =>
|
|
{
|
|
document.getElementById(`imagePreview`).src = URL.createObjectURL(event.target.files[0]);
|
|
}
|
|
|
|
var filters = {
|
|
invert: [0, `%`],
|
|
"hue-rotate": [0, `deg`]
|
|
}
|
|
|
|
let updateFilters = () => {
|
|
var stringified = [];
|
|
Object.entries(filters).forEach(entry => {
|
|
stringified.push(`${entry[0]}(${entry[1].join(``)})`);
|
|
});
|
|
console.log(document.getElementById(`imagePreview`).style.filter = stringified.join(` `));
|
|
}
|
|
|
|
document.getElementById(`imageInvert`).onchange = event =>
|
|
{
|
|
filters.invert[0] = event.target.checked ? 100 : 0;
|
|
updateFilters();
|
|
}
|
|
|
|
document.getElementById(`imageHue`).onchange = event =>
|
|
{
|
|
filters[`hue-rotate`][0] = event.target.value
|
|
document.getElementById(`imageHueValue`).innerText = `${filters[`hue-rotate`].join(``)}`;
|
|
updateFilters();
|
|
} |