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

時間 2019-11-08

標籤根據背景自動填充剩餘走馬燈简体版

原文原文鏈接

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

原由

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

3000px屏:
css

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

天貓應該是這麼作的。java

AutoImg

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

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表明1000pxgithub

github
npm:
npm install rc-autoimg --saveweb

輪播

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

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 效果：
canvas