一个有趣的轮播图

慕课网首页的轮播图有个非常有趣的效果,轮播顶部的背景会随着轮播图片的主色调改变。最近在做毕设项目,其中也用到了轮播图,索性就模仿了这么一个效果,如下所示:

要完成这样的效果,首先要有能够根据图片提取主色调的工具,我使用的是 rgbaster.js。由于我是在 Vue 项目中使用的该工具,所以首先要配置安装。

yarn add rgbaster

通过上述 命令将工具安装好之后,在 main.js 中引入。

import 'RGBaster'

RGBaster引入之后,该工具就可以在任何一个Vue组件中使用,因为RGBaster对象被赋予了window对象。

var img = document.getElementById('image');
// or
var img = 'http://example.com/path-to-image.jpg'

RGBaster.colors(img, {
  success: function(payload) {
    // You now have the payload.
    console.log(payload.dominant);
    console.log(payload.secondary);
    console.log(payload.palette);
  }
});

以上代码是RGBaster官方给出的使用例子,可以看到图片既可以是链接也可以是DOM对象,经过我的测试,使用 DOM对象会更快一些。通过这种方式拿到的主色调是rgb格式的,如果直接利用这个值作为轮播背景可能会比较鲜艳,所以在这个值的基础上,我又加入了透明度。

RGBaster.colors(imgs[index], {
       success: (payload) => {
         let reg = /\d+/g
         let cnum = payload.dominant.match(reg)
         let color = `rgba(${cnum[0]}, ${cnum[1]}, ${cnum[2]}, .3)`
         _this.carouselBg = `linear-gradient(to bottom, ${color} 0%, rgb(249, 250, 252))`
       },
       exclude: [ 'rgb(0,0,0)' ]
     })

推荐阅读:图片主色获取脚本rgbaster.js小介绍小使用 « 张鑫旭

坚持原创技术分享,您的支持将鼓励我继续创作!