img-color-grade

1.1.0 • Public • Published

img-color-grade

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

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

Demo

Install

Install

node_modules

node_modules

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

script

<script src="xxx></script>

Usage

API

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

API

getColor(imageUrl, count)

getColor(imageUrl, count)

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

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

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

getRenderGradient()

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

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

MIT


MIT

Package Sidebar

Install

npm i img-color-grade

Weekly Downloads

0

Version

1.1.0

License

MIT

Unpacked Size

18 kB

Total Files

5

Last publish

Collaborators

  • simida