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

Cleanup: remove unused jquery, tabs to spaces

Browse Source
This commit is contained in:
Lokesh Dhakar
2019-04-28 22:10:32 -07:00
parent e251daa01f
commit 2ffa707ae0
4 changed files with 102 additions and 9195 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
examples/js/demo.js
View File

@@ -1,6 +1,34 @@
var colorThief = new ColorThief();
var images = [
'black.png',
'red.png',
'rainbow-horizontal.png',
'rainbow-vertical.png',
// 'transparent.png',
// 'white.png',
];
// Render example images
var examplesHTML = Mustache.to_html(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);
} else {
image.addEventListener('load', function() {
showColorsForImage(image, section);
});
}
})
// Run Color Thief functions and display results below image.
// We also log execution time of functions for display.
const showColorsForImage = function(image, section) {
const file = section.src;
const start = Date.now();
const color = colorThief.getColor(image);
const elapsedTimeForGetColor = Date.now() - start;
@@ -20,29 +48,3 @@ const showColorsForImage = function(image, section) {
const outputEl = section.querySelector('.output');
outputEl.innerHTML = ouputHTML;
};
var colorThief = new ColorThief();
var images = [
'black.png',
'red.png',
'rainbow-horizontal.png',
'rainbow-vertical.png',
// 'transparent.png',
// 'white.png',
];
// Render example images
var examplesHTML = Mustache.to_html(document.getElementById('image-tpl').innerHTML, images);
document.getElementById('example-images').innerHTML = examplesHTML;
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);
});
}
})