Files
  • index.html
  • assets
  • dependencies
  • 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
36
37
38
39
40
41
42
<!DOCTYPE html>
<html>
  <head>
		<title>colorSpace</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="icon" href="assets/favicon.png" type="image/png">
    <link href="style.css" rel="stylesheet" type="text/css" />
		<link rel="stylesheet" href="dependencies/color-sampler.css">
		<link rel="stylesheet" href="dependencies/chota.css">
  </head>
  <body>
		<h1>colorSpace 👨‍🎨</h1>
		<p style="text-align:center; margin-top:-1.5em">
		<em><a href="assets/demo.gif">demo</a></em>
		</p>
		<br>
		<h5 class="text-gray">🖼️ Choose an image</h5>
		<input type="file" 
    onchange="go(window.URL.createObjectURL(this.files[0]))" id="url">
		<div class="is-text-center">
		<label>Threshold:</label><input value="10" type="number" id="threshold"/> </div>
		<canvas id="canvas"></canvas>
		<div id="container"></div>
		<div class="card is-text-center">
			<header>
				<h4>Wot dis magic? ✨</h4>
			</header>
			<p>colorSpace is a smarter background removal tool, built entirely on the frontend - so your images <b>never</b> leave your computer.<br><br>It compares similar colors in 3D space, and purges them from the image based on a threshold.<br><br><a href="https://github.com/emn178/color-sampler">color-sampler</a> lets you pick colors to purge, <a href="https://github.com/antimatter15/rgb-lab">rgb-lab</a> converts <code>RGB</code> color to the <code>LAB</code>, for utilization of the <code>deltaE</code> function (that's the real magic 🔮)<br></p>
			<footer>
				<a class="text-grey" href="https://twitter.com/jajoosam">by @jajoosam</a><br>
				<a href="/__repl"><img src="https://icongr.am/entypo/code.svg?size=25px" style="display:inline"></a>&nbsp;&nbsp;<a href="https://twitter.com/jajoosam/status/1083764001375346688"><img src="https://icongr.am/entypo/twitter.svg?size=25px" style="display:inline"></a>
			</footer>
		</div>
		<script src="dependencies/color.js"></script>
		<script src="dependencies/jquery.js"></script>
		<script src="dependencies/color-sampler.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