使用canvas给banner图片加个颜色条
突发奇想，给滚动的banner，每一个图片的顶部都加上一个和当前banner图片搭配的具有背景色的色条，这样做可以在不改变图片规格的情况下在移动端做到沉浸式。
技术栈
swiper 4.0 / react / canvas
大致思路是使用canvas在背后依次加载每一张图片，然后获取每一张图片左上角的第一个像素值，以此作为色条的背景色。
技术重点和难点
- 在html模板中插入display为none的canvas元素
- 使用promise并发加载远程图片
- 如果图片存储到cdn上，需要在cdn配置允许跨域访问的header属性(Access-Control-Allow-Origin: 指定的域名信息或者暴力的使用*来允许所有域名访问)
- 图片设置crossOrigin属性为anonymous，使得canvas可以读取图像数据
- 通过componentDidUpdate生命周期控制swiper的初始化
- 使用缓存技术，防止每次加载banner重复计算像素值