Author: | wangyiwy |
---|---|
Views Total: | 838 views |
Official Page: | Go to website |
Last Update: | January 22, 2020 |
License: | MIT |
Preview:

Description:
palette-js is a canvas based JavaScript library that extracts prominent colors from a BMP image and generates a palette just like the Android Palette API.
How to use it:
1. Download and import the palette.min.js
from the dist
folder.
<script src="dist/palette.min.js"></script>
2. Define an array of images (bmp format).
const image_paths = ['1.bmp', '2.bmp', '3.bmp'];
3. Generate Android palettes from the images.
image_paths.forEach(function (path) { let image = new Image(); image.src = path; image.onload = function () { let palette = new Palette(image); let html = `<div class="item"><img src="${path}" class="image"><ul class="colors">`; html += `<li class="color" style="background: ${palette.getVibrantColor()}"><span>VIBRANT</span></li>`; html += `<li class="color" style="background: ${palette.getLightVibrantColor()}"><span>LIGHT_VIBRANT</span></li>`; html += `<li class="color" style="background: ${palette.getDarkVibrantColor()}"><span>DARK_VIBRANT</span></li>`; html += `<li class="color" style="background: ${palette.getMutedColor()}"><span>MUTED</span></li>`; html += `<li class="color" style="background: ${palette.getLightMutedColor()}"><span>LIGHT_MUTED</span></li>`; html += `<li class="color" style="background: ${palette.getDarkMutedColor()}"><span>DARK_MUTED</span></li>`; html += '</ul></div>'; document.getElementById('container').innerHTML += html }; });