img-color-grade.js

利用 canvas 获取图片颜色，可获取图片主色与次色，并提供生成渐变效果API。

Obtain the main color and secondary color of the image, and provide the API for generating the gradient effect.

渐变背景

Palette

Usage

                
    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)
        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)
        })
    })

Download

API

getColor(imageUrl, count)

返回一个 Promise 对象，包括调色板，主色、次色

从图像获取主色。颜色以三个表示红色，绿色和蓝色值的 RGB(A) 格式的字符串。

imageUrl - 图片url，为 img 标签的 src 属性，或者直接一个远程链接。
count - 是一个可选参数，必须为1或更大的Integer，默认为10。

getRenderGradient()

返回一段 Promise 对象，resolve 字符串，利用主色拼接成的 rgba 背景色

从图像获取排序的颜色，将两端的颜色与 background-image 拼接成 CSS 字符串。