1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
|
let canvas;
let ctx;
let imports;
let settings = {
brightness: {},
saturate: {},
contrast: {},
blur: {filter: value => value * canvas.width / 100 + 'px'}
};
const img = new Image();
// wait for site to be parsed so element can be found
document.addEventListener("DOMContentLoaded", function() {
canvas = document.getElementById("myCanvas");
ctx = canvas.getContext("2d");
imports = document.getElementById("imports");
// bind listeners
document.getElementById("take-picture").addEventListener("click", take_picture);
document.getElementById("upload-image").addEventListener("change", upload_image)
document.getElementById("save").addEventListener("click", save_image)
document.getElementById("share").addEventListener("click", share_image)
window.addEventListener("resize", () => draw(true))
for (let setting in settings) {
// make an array out of an iterable
const elements = [...document.getElementsByClassName(setting)];
settings[setting].elements = elements;
// if filter is not definded, use identity function
settings[setting].filter ||= value => value;
for (let element of elements) {
element.addEventListener("input", settings_apply);
}
}
})
function take_picture() {
canvas.classList.remove("is-hidden");
imports.classList.add("is-hidden");
}
function upload_image() {
canvas.classList.remove("is-hidden");
imports.classList.add("is-hidden");
console.log(this.files[0]);
img.src = URL.createObjectURL(this.files[0]);
img.onload = () => draw(true);
}
function save_image() {
draw(false);
const dataUrl = canvas.toDataURL("image/png");
// downloading only works with links but not window.open
const link = document.createElement('a');
link.href = dataUrl;
link.download = 'imagine.png';
link.click();
}
function share_image() {
}
function settings_apply(event) {
const changed_setting = event.target.id;
const new_value = event.target.value;
// update all inputs for that setting (mobile and desktop) to the new value
for (let element of settings[changed_setting].elements) {
if (element == event.target) continue;
element.value = new_value;
}
draw(true);
}
function draw(viewport_scale) {
const filter = Object.entries(settings)
.map(([setting, {elements, filter}]) => `${setting}(${filter(elements[0].value)})`)
.join(" ")
// set the resolution to the original and then scale down to the viewport to
// only calculate the filter on pixels the user can see.
canvas.height = img.naturalHeight;
canvas.width = img.naturalWidth;
if (viewport_scale) {
canvas.height = canvas.clientHeight;
canvas.width = canvas.clientWidth;
}
ctx.filter = filter
console.log(filter);
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
}
|
