@jajoosam/

Santafy

HTML, CSS, JS

Santa them pictures

fork
loading
header iconstalk
Files
  • index.html
  • face.js
  • favicon.png
  • santa.png
  • script.js
  • style.css

This Plugin Crashed!

Error: Error: must not create an existing file {"type":"CREATE_FILE","wid":"0.1308030214579392","path":"index.html","file":{"path":"index.html","content":{"asEncoding":{"base64":"PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgoJCTx0aXRsZT5TYW50YWZ5PC90aXRsZT4KICAgIDxtZXRhIGNoYXJzZXQ9InV0Zi04Ij4KICAgIDxtZXRhIG5hbWU9InZpZXdwb3J0IiBjb250ZW50PSJ3aWR0aD1kZXZpY2Utd2lkdGgsIGluaXRpYWwtc2NhbGU9MS4wIj4KCQk8bGluayByZWw9Imljb24iIGhyZWY9ImZhdmljb24ucG5nIiB0eXBlPSJpbWFnZS9wbmciPgogICAgPGxpbmsgaHJlZj0ic3R5bGUuY3NzIiByZWw9InN0eWxlc2hlZXQiIHR5cGU9InRleHQvY3NzIiAvPgoJCTxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaHR0cHM6Ly91bnBrZy5jb20vY2hvdGFAbGF0ZXN0Ij4KICA8L2hlYWQ+CiAgPGJvZHk+CgkJPGgxPlNhbnRhZnkg8J+OhTwvaDE+CgkJPGg1IGNsYXNzPSJ0ZXh0LWdyYXkiPvCflrzvuI8gQ2hvb3NlIGFuIGltYWdlIHRvIHNhbnRhZnk8L2g1PgoJCTxpbnB1dCB0eXBlPSJmaWxlIiAKICAgIG9uY2hhbmdlPSJnbyh3aW5kb3cuVVJMLmNyZWF0ZU9iamVjdFVSTCh0aGlzLmZpbGVzWzBdKSkiIGlkPSJ1cmwiPgoJCTxjYW52YXMgaWQ9ImNhbnZhcyI+PC9jYW52YXM+CgkJPGRpdiBpZD0iZGl2Ij48L2Rpdj4KCQk8ZGl2IGNsYXNzPSJjYXJkIGlzLXRleHQtY2VudGVyIj4KCQkJPGhlYWRlcj4KCQkJCTxoND5Xb3QgZGlzIG1hZ2ljPyDinKg8L2g0PgoJCQk8L2hlYWRlcj4KCQkJPHAgPlNhbnRhZnkgYXV0b21hZ2ljYWxseSBhZGRzIHNhbnRhIGhhdHMgdG8gcGVvcGxlIGluIHlvdXIgaW1hZ2VzISBJdCBjb21wcmVzc2VzIHlvdXIgaW1hZ2VzIHdpdGggPGEgaHJlZj0iaHR0cHM6Ly9naXRodWIuY29tL2JydW5vYmFyNzkvSi1JLUMiPkouSS5DPC9hPiwgZGV0ZWN0cyBmYWNlcyB3aXRoIDxhIGhyZWY9Imh0dHBzOi8vZ2l0aHViLmNvbS9qYXlzYWx2YXQvanF1ZXJ5LmZhY2VkZXRlY3Rpb24iPmpxdWVyeS5mYWNlZGV0ZWN0aW9uPC9hPiwgYW5kIGRyYXdzIDxhIGhyZWY9InNhbnRhLnBuZyI+dGhpczwvYT4gc2FudGEgaGF0IG92ZXIgdGhlbSB1c2luZyBIVE1MIENhbnZhcy48YnI+PC9wPgoJCQk8Zm9vdGVyPgoJCQkJPHNwYW4gY2xhc3M9InRleHQtZGFyayI+IPCfjoRNZXJyeSBDaHJpc3RtYXMg8J+OhDxzcGFuPgoJCQkJPGEgY2xhc3M9InRleHQtZ3JleSIgaHJlZj0iaHR0cHM6Ly90d2l0dGVyLmNvbS9qYWpvb3NhbSI+YnkgQGpham9vc2FtPC9hPjxicj4KCQkJCTxhIGhyZWY9Ii9fX3JlcGwiPjxpbWcgc3JjPSJodHRwczovL2ljb25nci5hbS9jbGFyaXR5L2NvZGUuc3ZnIiBzdHlsZT0iZGlzcGxheTppbmxpbmUiPjwvYT4KCQkJPC9mb290ZXI+CgkJPC9kaXY+CgkJPHNjcmlwdCBzcmM9Imh0dHBzOi8vY29kZS5qcXVlcnkuY29tL2pxdWVyeS0zLjMuMS5taW4uanMiPjwvc2NyaXB0PgoJCTxzY3JpcHQgc3JjPSJmYWNlLmpzIj48L3NjcmlwdD4KICAgIDxzY3JpcHQgc3JjPSJzY3JpcHQuanMiPjwvc2NyaXB0PgoJCTxzY3JpcHQgYXN5bmMgZGVmZXIgc3JjPSJodHRwczovL2Nkbi5zaW1wbGVhbmFseXRpY3MuaW8vaGVsbG8uanMiPjwvc2NyaXB0PiAKCQk8bm9zY3JpcHQ+PGltZyBzcmM9Imh0dHBzOi8vYXBpLnNpbXBsZWFuYWx5dGljcy5pby9oZWxsby5naWYiIGFsdD0iIj48L25vc2NyaXB0PgogIDwvYm9keT4KPC9odG1sPg=="},"asBuffer":null},"loaded":true}}
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

<!DOCTYPE html>
<html>
  <head>
		<title>Santafy</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="icon" href="favicon.png" type="image/png">
    <link href="style.css" rel="stylesheet" type="text/css" />
		<link rel="stylesheet" href="https://unpkg.com/[email protected]">
  </head>
  <body>
		<h1>Santafy 🎅</h1>
		<h5 class="text-gray">🖼️ Choose an image to santafy</h5>
		<input type="file" 
    onchange="go(window.URL.createObjectURL(this.files[0]))" id="url">
		<canvas id="canvas"></canvas>
		<div id="div"></div>
		<div class="card is-text-center">
			<header>
				<h4>Wot dis magic? ✨</h4>
			</header>
			<p >Santafy automagically adds santa hats to people in your images! It compresses your images with <a href="https://github.com/brunobar79/J-I-C">J.I.C</a>, detects faces with <a href="https://github.com/jaysalvat/jquery.facedetection">jquery.facedetection</a>, and draws <a href="santa.png">this</a> santa hat over them using HTML Canvas.<br></p>
			<footer>
				<span class="text-dark"> 🎄Merry Christmas 🎄<span>
				<a class="text-grey" href="https://twitter.com/jajoosam">by @jajoosam</a><br>
				<a href="/__repl"><img src="https://icongr.am/clarity/code.svg" style="display:inline"></a>
			</footer>
		</div>
		<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
		<script src="face.js"></script>
    <script src="script.js"></script>
		<script async defer src="https://cdn.simpleanalytics.io/hello.js"></script> 
		<noscript><img src="https://api.simpleanalytics.io/hello.gif" alt=""></noscript>
  </body>
</html>
result
console