blob: 6953ee5710a98e03855cf9554a4baf6636b132d6 (
plain)
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
|
let canvas, imports;
// wait for site to be parsed so element can be found
document.addEventListener("DOMContentLoaded", function () {
// 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)
canvas = document.getElementById("myCanvas");
imports = document.getElementById("imports");
})
function take_picture() {
canvas.classList.remove("is-hidden");
imports.classList.add("is-hidden");
}
function upload_image(event) {
canvas.classList.remove("is-hidden");
imports.classList.add("is-hidden");
console.log(this.files[0]);
const img = new Image();
const ctx = canvas.getContext("2d");
img.src = URL.createObjectURL(this.files[0]);
img.onload = function() {
canvas.width = img.naturalWidth;
canvas.height = img.naturalHeight;
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
}
}
function save_image() {
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() {
}
|
