• Demo

# yarn
yarn add img-color-grade
#npm
npm install img-color-grade --save

<script src="xxx></script>

• src image url
• scale image quality(0 ~1)

 const imgs = Array.from(document.querySelectorAll('.img img'))
    
/** ============ 渐变 ===================== */
const famousImgs = imgs.slice(0, 8)
const famousImgSrc = famousImgs.map(img => img.src)

famousImgSrc.forEach((src,index) => {
    const obj = colorGrade(src, 0.3)
    obj.getRenderGradient().then(rgba => {
        famousImgs[index].parentNode.setAttribute('style', rgba)
    })
})

/** =========== 调色板 ====================== */
const paletteImgs = imgs.slice(8, 16)
const paletteImgSrc = paletteImgs.map(img => img.src)


const paletteEls = Array.from(document.querySelectorAll('.example-palette .img .palette'))
paletteImgSrc.forEach((src,index) => {
    const obj = colorGrade(src)
    obj.getColor(5).then(color => {
        const html = color.palette.map(o => {
            // return  some html
        }).join('')
        paletteEls[index] && (paletteEls[index].innerHTML =  html)
    })
})

MIT