janishutz/color-thief
1
0
Fork 0
mirror of https://github.com/janishutz/color-thief.git synced 2025-11-25 22:04:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #158 from lokesh/feat-demo-page

Browse Source 
feat: Demo page
This commit is contained in:
Lokesh Dhakar
2019-07-14 09:21:30 -07:00
committed by GitHub
parent ced6b5300d a271686ab9
commit d957f73e6f
5 changed files with 82 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
cypress/test-pages/index.html
View File

@@ -28,7 +28,7 @@
</div> </div>
<code> <code>
<div class="output-color">{{colorStr}}</div> <div class="output-color">{{colorStr}}</div>
<div class="time">{{elapsedTimeForGetColor}}ms</div> <div class="time">{{elapsedTime}}ms</div>
</code> </code>
</div> </div>
</script> </script>
@@ -43,7 +43,7 @@
</div> </div>
<code> <code>
<div class="output-palette">{{paletteStr}}</div> <div class="output-palette">{{paletteStr}}</div>
<div class="time">{{elapsedTimeForGetPalette}}ms</div> <div class="time">{{elapsedTime}}ms</div>
</code> </code>
</div> </div>
</script> </script>

12
examples/css/screen.css
View File

@@ -22,7 +22,7 @@
/* Base /* Base
* *----------------------------------------------- */ * *----------------------------------------------- */
/** { * {
box-sizing: border-box; box-sizing: border-box;
} }
@@ -31,10 +31,10 @@ body {
padding: 0; padding: 0;
background: var(--bg-color); background: var(--bg-color);
} }
*/
/* Typography /* Typography
* *----------------------------------------------- */ * *----------------------------------------------- */
/*
html { html {
font-size: 16px; font-size: 16px;
font-family: var(--font); font-family: var(--font);
@@ -64,10 +64,10 @@ code {
font-family: var(--code-font); font-family: var(--code-font);
overflow-wrap: break-word; overflow-wrap: break-word;
} }
*/
/* -- Layout ------------------------------------------------------------------ */ /* -- Layout ------------------------------------------------------------------ */
/*
.image-section { .image-section {
border-bottom: 1px solid #ccc; border-bottom: 1px solid #ccc;
padding: 16px 16px 32px 16px; padding: 16px 16px 32px 16px;
@@ -92,4 +92,4 @@ code {
.time { .time {
color: var(--muted-color); color: var(--muted-color);
font-weight: normal; font-weight: normal;
}*/ }

0
examples/img/image2.jpg → examples/img/image-2.jpg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 137 KiB

After

Width:  |  Height:  |  Size: 137 KiB

18
examples/js/demo.js
View File

@@ -1,12 +1,9 @@
var colorThief = new ColorThief(); var colorThief = new ColorThief();
var images = [ var images = [
'black.png', 'image-1.jpg',
'red.png', 'image-2.jpg',
'rainbow-horizontal.png', 'image-3.jpg',
'rainbow-vertical.png',
// 'transparent.png',
// 'white.png',
]; ];
// Render example images // Render example images
@@ -28,9 +25,11 @@ document.querySelectorAll('.image').forEach((image) => {
// Run Color Thief functions and display results below image. // Run Color Thief functions and display results below image.
// We also log execution time of functions for display. // We also log execution time of functions for display.
const showColorsForImage = function(image, section) { const showColorsForImage = function(image, section) {
// getColor(img)
let start = Date.now(); let start = Date.now();
// 🎨🔓
let result = colorThief.getColor(image); let result = colorThief.getColor(image);
let elapsedTime = Date.now() - start; let elapsedTime = Date.now() - start;
const colorHTML = Mustache.to_html(document.getElementById('color-tpl').innerHTML, { const colorHTML = Mustache.to_html(document.getElementById('color-tpl').innerHTML, {
color: result, color: result,
@@ -40,10 +39,13 @@ const showColorsForImage = function(image, section) {
// getPalette(img) // getPalette(img)
let paletteHTML = ''; let paletteHTML = '';
let colorCounts = [null, 1, 2, 3, 5, 7, 10, 20]; let colorCounts = [2, 9];
colorCounts.forEach((count) => { colorCounts.forEach((count) => {
let start = Date.now(); let start = Date.now();
// 🎨🔓
let result = colorThief.getPalette(image, count); let result = colorThief.getPalette(image, count);
let elapsedTime = Date.now() - start; let elapsedTime = Date.now() - start;
paletteHTML += Mustache.to_html(document.getElementById('palette-tpl').innerHTML, { paletteHTML += Mustache.to_html(document.getElementById('palette-tpl').innerHTML, {
count, count,

64
index.html Normal file
View File

@@ -0,0 +1,64 @@
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Color Thief</title>
<meta name="description" content="Get the dominant color or color palette from an image.">
<meta name="author" content="Lokesh Dhakar">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Karla%7CMontserrat:700">
<link rel="stylesheet" href="examples/css/screen.css">
</head>
<body>
<div id="example-images"></div>
<script id='image-tpl' type='text/x-mustache'>
{{#.}}
<div class="image-section" data-image="{{.}}">
<h2>{{.}}</h2>
<img class="image" src="./examples/img/{{.}}" />
<div class="output"></div>
</div>
{{/.}}
</script>
<script id="color-tpl" type="text/x-mustache">
<div class="color">
<h3>getColor(img)</h3>
<div class="swatches">
<div class="swatch" style="background-color: rgb({{color.0}}, {{color.1}}, {{color.2}})"></div>
</div>
<code>
<div class="output-color">{{colorStr}}</div>
<div class="time">{{elapsedTime}}ms</div>
</code>
</div>
</script>
<script id="palette-tpl" type="text/x-mustache">
<div class="palette" data-count="{{count}}">
<h3>getPalette(img, {{count}})</h3>
<div class="swatches">
{{#palette}}
<div class="swatch" style="background-color: rgb({{0}}, {{1}}, {{2}})"></div>
{{/palette}}
</div>
<code>
<div class="output-palette">{{paletteStr}}</div>
<div class="time">{{elapsedTime}}ms</div>
</code>
</div>
</script>
<script src="src/color-thief.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/3.0.1/mustache.min.js"></script>
<script src="examples/js/demo.js"></script>
</body>
</html>