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

done

Browse Source
This commit is contained in:
Janis Hutz
2024-06-28 13:32:22 +02:00
parent 18cad78969
commit bfbb5d64de
34 changed files with 8132 additions and 739 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
cypress/test-pages/index.js
View File

@@ -11,49 +11,58 @@ var images = [
];
// Render example images
var examplesHTML = Mustache.to_html(document.getElementById('image-tpl').innerHTML, images);
document.getElementById('example-images').innerHTML = examplesHTML;
console.log( Mustache );
var examplesHTML = Mustache.render( document.getElementById( 'image-tpl' ).innerHTML, images );
document.getElementById( 'example-images' ).innerHTML = examplesHTML;
// Once images are loaded, process them
document.querySelectorAll('.image').forEach((image) => {
const section = image.closest('.image-section');
if (this.complete) {
showColorsForImage(image, section);
document.querySelectorAll( '.image' ).forEach( ( image ) => {
const section = image.closest( '.image-section' );
if ( this.complete ) {
showColorsForImage( image, section );
} else {
image.addEventListener('load', function() {
showColorsForImage(image, section);
});
image.addEventListener( 'load', function () {
showColorsForImage( image, section );
// showColorsForImageURLNewAPI( )
} );
}
})
} );
// Run Color Thief functions and display results below image.
// 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 result = colorThief.getColor(image);
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(),
const colorHTML = Mustache.render( document.getElementById( 'color-tpl' ).innerHTML, {
'color': result,
'colorStr': result.toString(),
elapsedTime
})
} );
// getPalette(img)
let paletteHTML = '';
let colorCounts = [2, 3, 5, 7, 10, 20];
colorCounts.forEach((count) => {
let colorCounts = [
2,
3,
5,
7,
10,
20
];
colorCounts.forEach( ( count ) => {
let start = Date.now();
let result = colorThief.getPalette(image, count);
let result = colorThief.getPalette( image, count );
let elapsedTime = Date.now() - start;
paletteHTML += Mustache.to_html(document.getElementById('palette-tpl').innerHTML, {
paletteHTML += Mustache.render( document.getElementById( 'palette-tpl' ).innerHTML, {
count,
palette: result,
paletteStr: result.toString(),
'palette': result,
'paletteStr': result.toString(),
elapsedTime
})
});
} );
} );
const outputEl = section.querySelector('.output');
const outputEl = section.querySelector( '.output' );
outputEl.innerHTML += colorHTML + paletteHTML;
};