利用 canvas 获取图片颜色,可获取图片主色与次色,并提供生成渐变效果API。
Obtain the main color and secondary color of the image, and provide the API for generating the gradient effect.
# yarn
yarn add img-color-grade
#npm
npm install img-color-grade --save
<script src="//unpkg.com/img-color-grade@lastest></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)
})
})
从图像获取主色。颜色以三个表示红色,绿色和蓝色值的 RGB(A) 格式的字符串。
- imageUrl - 图片url,为 img 标签的 src 属性,或者直接一个远程链接。
- count - 是一个可选参数,必须为1或更大的Integer,默认为10。
从图像获取排序的颜色,将两端的颜色与 background-image 拼接成 CSS 字符串。