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

docs: Add palette count calls to example page

Browse Source
This commit is contained in:
Lokesh Dhakar
2019-05-02 08:43:05 -07:00
parent fed4154d29
commit eef8742c0b
2 changed files with 31 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
examples/js/demo.js
View File

@@ -28,22 +28,32 @@ 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) {
const start = Date.now(); // getColor(img)
const color = colorThief.getColor(image); let start = Date.now();
const elapsedTimeForGetColor = Date.now() - start; let result = colorThief.getColor(image);
const palette = colorThief.getPalette(image); let elapsedTime = Date.now() - start;
const elapsedTimeForGetPalette = Date.now() - start + elapsedTimeForGetColor; const colorHTML = Mustache.to_html(document.getElementById('color-tpl').innerHTML, {
color: result,
colorStr: result.toString(),
elapsedTime
})
const output = { // getPalette(img)
color: color, let paletteHTML = '';
colorStr: color.toString(), let colorCounts = [null, 1, 2, 3, 5, 7, 10, 20];
palette: palette, colorCounts.forEach((count) => {
paletteStr: palette.toString(), let start = Date.now();
elapsedTimeForGetColor: elapsedTimeForGetColor, let result = colorThief.getPalette(image, count);
elapsedTimeForGetPalette: elapsedTimeForGetPalette let elapsedTime = Date.now() - start;
}; console.log('palette()', count, result.length)
const ouputHTML = Mustache.to_html(document.getElementById('output-tpl').innerHTML, output); paletteHTML += Mustache.to_html(document.getElementById('palette-tpl').innerHTML, {
count,
palette: result,
paletteStr: result.toString(),
elapsedTime
})
});
const outputEl = section.querySelector('.output'); const outputEl = section.querySelector('.output');
outputEl.innerHTML = ouputHTML; outputEl.innerHTML += colorHTML + paletteHTML;
}; };

8
index.html
View File

@@ -20,7 +20,7 @@
{{/.}} {{/.}}
</script> </script>
<script id="output-tpl" type="text/x-mustache"> <script id="color-tpl" type="text/x-mustache">
<div class="color"> <div class="color">
<h3>Dominant Color</h3> <h3>Dominant Color</h3>
<div class="swatches"> <div class="swatches">
@@ -31,8 +31,11 @@
<div class="time">{{elapsedTimeForGetColor}}ms</div> <div class="time">{{elapsedTimeForGetColor}}ms</div>
</code> </code>
</div> </div>
</script>
<script id="palette-tpl" type="text/x-mustache">
<div class="palette"> <div class="palette">
<h3>Palette</h3> <h3>Palette {{ count }}</h3>
<div class="swatches"> <div class="swatches">
{{#palette}} {{#palette}}
<div class="swatch" style="background-color: rgb({{0}}, {{1}}, {{2}})"></div> <div class="swatch" style="background-color: rgb({{0}}, {{1}}, {{2}})"></div>
@@ -45,6 +48,7 @@
</div> </div>
</script> </script>
<script src="src/color-thief.js"></script> <script src="src/color-thief.js"></script>
<script src="examples/js/mustache.js"></script> <script src="examples/js/mustache.js"></script>
<script src="examples/js/demo.js"></script> <script src="examples/js/demo.js"></script>