轮播图根据图片底色自动填充剩余背景色

项目中用的是 Ant Design Pro ，Carousel 轮播组件

1、需求

需要实现一个类似腾讯课堂的轮播图， 图片定宽定高， 不同分辨率屏幕时，轮播图会根据图片的背景色填充容器左右空隙

比如 1800px 屏:

比如 3000px 屏:

可以通过开发者工具看到，图片还是那张图片，容器背景色填充

2、实现

思路：轮播切换时，利用 canvas 的 getImageData 方法获取颜色，然后填充背景色。适用于背景色为纯色的需求，因为获取的是左上角的颜色

样式：

.carousel{
    height: 250px;
    overflow: hidden;
    .carouselItem{
      text-align: center;
      width: 100%;
      height: 250px;
      img{
        max-height: 250px;
        margin: 0 auto;
        border: 5px solid;
      }
    }
}

实现：

class Demo extends PureComponent {

  constructor(props) {
    super(props);
    this.state = {
      bgColor: "",
      imgList: [{
        id:"img111",
        url:"/img111.png"
      },{
        id:"img222",
        url:"/img222.png"
      },{
        id:"img333",
        url:"/img333.png"
      }],
    };
  }
  drawBannerBg(index) {
    var c = document.getElementById("myCanvas");
    var ctxt = c.getContext("2d");
    var img = document.getElementById(this.state.imgList[index].id).children[0];
    ctxt.drawImage(img, 0, 0);
    var data = ctxt.getImageData(0, 0, 1, 1).data;
    this.setState({
      bgColor: "rgba(" + data.toString() + ")",
    });
  }
  onChange = (oldIndex, newIndex) => {
    newIndex = newIndex < 0 ? 0 : newIndex;
    this.drawBannerBg(newIndex);
  }
  componentDidMount() {
    const { dispatch } = this.props;
    var that = this;
    var c = document.getElementById("myCanvas");
    var ctxt = c.getContext("2d");
    var img = new Image;
    img.src = this.state.imgList[0].url;
    img.onload = function () {
      ctxt.drawImage(img, 0, 0);
      var data = ctxt.getImageData(0, 0, 1, 1).data;
      that.setState({
        bgColor: "rgba(" + data.toString() + ")",
      });
    }
  }
  render() {
    const { bgColor,imgList } = this.state;
    return (
      <div>
        <div className={styles.carousel}>
          <Carousel autoplay className={styles.carouselItem} beforeChange={this.onChange}>
            {imgList.map(item => {
              return (<div><div id={item.id} key={item.id} style={{ background: bgColor }}>
                <img src={item.url}/>
              </div></div>);
            })}
          </Carousel>
          <canvas id={"myCanvas"}></canvas>
        </div>
      </div>
    );
  }
}
export default Demo;

3、效果

方便查看效果特意加了边框，边框内为图片，边框外为填充颜色

1800px 屏:

3000px 屏: