forked from gndx/platziconf2020
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
51 lines (45 loc) · 1.35 KB
/
index.html
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
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Platzi Conf Photo</title>
</head>
<style>
body {
background: url(dark.png) 0 0;
color: white;
}
img {
margin: 0;
padding: 0;
width: 200px;
height: auto;
}
</style>
<body>
<img src="https://media.giphy.com/media/l3lWUFTcaFBTIokIiz/giphy.gif" alt="Platzi Conf">
<div style="padding:10px">
<input type="file" name="myfile" id="photoupload" onchange="handleImage()" />
</div>
<span id="download" style="margin:10px;display:block"></span>
<canvas id="myCanvas" width="800" height="800" style="margin:10px"></canvas>
</body>
<script>
const handleImage = () => {
const image = document.getElementById("photoupload");
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const imageObj1 = new Image();
const imageObj2 = new Image();
imageObj1.src = URL.createObjectURL(image.files[0]);
imageObj1.onload = function () {
ctx.drawImage(imageObj1, 150, 150, 500, 500);
imageObj2.src = "CarnetEventoPrexia2020V2.png";
imageObj2.onload = function () {
ctx.drawImage(imageObj2, 0, 0, 800, 800);
document.getElementById("download").textContent = "Descargar: Imagen clic derecho, Guardar imagen como, Comparte en tus redes sociales";
}
};
}
</script>
</html>