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