參考自張鑫旭，地址：https://www.zhangxinxu.com/wordpress/2014/08/image-dominant-color-get-rgbaster-js/
插件git地址：https://github.com/briangonzalez/rgbaster.js
分四步
- 下載插件
npm i rgbaster -S - 引入插件
import rgbaster from 'rgbaster' - 使用插件
let result = rgbaster(
this.imgSrc, // 圖片地址
{
ignore: ['rgb(255,255,255)', 'rgb(0,0,0)'], // 要忽略識別的顏色
scale: 0.6 // 查詢時縮小圖片炼团，降低精度澎嚣。換取識別速度提高
}
)
- 為所欲為
result.then((res)=>{
let imgColor = res[0].color // rgb(68,50,36)
document.getElementsByTagName('body')[0].style.background = imgColor
})
完整代碼
<template>
<div>
<img :src="imgSrc" alt="">
</div>
</template>
<script>
import rgbaster from 'rgbaster'
export default {
data() {
return {
imgSrc: require('@/assets/6.jpg')
}
},
mounted() {
let result = rgbaster(
this.imgSrc,
{
ignore: ['rgb(255,255,255)', 'rgb(0,0,0)']
}
)
result.then((res)=>{
console.log(res[0].color);
document.getElementsByTagName('body')[0].style.background = res[0].color
})
}
}
</script>
<style>
img {
width: 300px;
margin: 0 auto;
margin-top: 50px;
display: block;
}
</style>
