repl.it
@jajoosam/

Santafy

HTML, CSS, JS

Santa them pictures

fork
loading
Files
  • index.html
  • face.js
  • favicon.png
  • santa.png
  • script.js
  • style.css
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

<!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