根據 輪播圖背景色 自動填充剩餘背景色的 走馬燈

原由

今天產品經理過來講，須要在首頁加上一個相似一個天貓的輪播圖。 天貓的輪播圖是 圖片定寬定高， 當不一樣分辨率屏幕時候 會根據圖片的背景色填充容器左右空隙。 好比 1800px屏:

3000px屏:

第一反應：無論是js仍是css 都沒有辦法獲取圖片色值的， 那必須服務端給我了。要麼 後臺cms在上次圖片的時候，指定好背景色， 要麼服務端調用圖片api獲取背景色而後給我。

天貓應該是這麼作的。

AutoImg

純前端的話， 有麼有辦法獲取色值呢？ 忽然想到，以前作WebGL貼紋理的時候， 在片元着色器裏是能夠獲取到圖片每個像素點的色值的。 用WebGL確定是太大了， canvas能夠嗎？ 查詢了一下是能夠的，有方法的getImageData。 那麼至少說明了純前端的作飯是可行的。 咱們先實現一個組件AutoImg，AutoImg中的img 定高定寬， 容器的背景色用img的背景色填充。

export default class AutoImg extends Component {
    static propTypes = {
        height: PropTypes.number.isRequired,
        width: PropTypes.number.isRequired,
        source: PropTypes.number.isRequired,
    }

    componentDidMount() {
        this.setImg(this.props.source)
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.source !== this.props.source) {
            this.setImg(nextProps.source)
        }
    }

    setImg(source) {
        const { width, height } = this.props

        const ima = new Image()
        ima.src = source
        ima.crossOrigin = '' // 處理跨域圖片
        ima.onload = () => {
            const ctx = this.canva.getContext('2d')
            ctx.drawImage(ima, 0, 0, width, height)

            const [r, g, b, a] = ctx.getImageData(0,0,1,1).data; // 獲取背景色
            this.inner.style.background = `rgba(${r}, ${g}, ${b}, ${a})`
        }
    }

    render() {
        const { width, height } = this.props
        return (
            <div ref={inner => this.inner = inner}> <canvas style={{ display: 'block', margin: '0 auto' }} width={`${width}px`} height={`${height}px`} ref={canva => this.canva = canva} > </canvas> </div>
        )
    }
}
複製代碼

這裏 考慮到getImageData 參數是整形， 全部要求width， height必須是number類型，1000表明1000px

github npm: npm install rc-autoimg --save

輪播

輪播咱們就不造輪子了，直接使用nuka-carousel。

import Carousel from 'nuka-carousel'

default class Banner extends Component {
    render() {
       const bannerImgList = [
        'https://img.alicdn.com/tps/i4/TB1yqAhcpmWBuNjSspdSuvugXXa.jpg',
        'https://img.alicdn.com/tps/i4/TB1XVCsaTdYBeNkSmLySutfnVXa.jpg',
        'https://img.alicdn.com/simba/img/TB1ror0cf5TBuNjSspcSuvnGFXa.jpg',
        'https://img.alicdn.com/tfs/TB1ed2lggmTBuNjy1XbXXaMrVXa-1130-500.jpg_q100.jpg_.webp',
    ]
       
       
        return (
            <div className={styles.banner}> <Carousel autoplay={true} > { bannerImgList.map(source => ( <div key={source}> <AutoImg width={1200} height={340} source={source} /> </div> )) } </Carousel> </div> ) } } 複製代碼

2500px 效果：

結語

兼容性 > IE9 或許你也有這種輪播需求，若是沒有但願提取顏色的地方，能夠啓發到你。