天天通讯！uni-app 实现轮播图组件父容器背景色随图片主题色改变

2023-03-17 12:12:12 来源：博客园

(相关资料图)

uni-app 实现轮播图组件父容器背景色随图片主题色改变

实现思路

1、获取轮播图主题色，通过 canvas 获取图片主题色。2、随着轮播图组件图片的轮播，动态设置父容器背景色为图片的主题色。

实现代码

<script>  import { getImageThemeColor } from "@/utils/index.js";  export default {    data() {      return {        swiperList: [          {            url: "https://cdn.uviewui.com/uview/swiper/swiper2.png",          },          {            url: "https://cdn.uviewui.com/uview/swiper/swiper1.png",          },          {            url: "https://cdn.uviewui.com/uview/swiper/swiper3.png",          },        ],        swiperCurrent: 0,      };    },    onLoad() {      this.getSwiperThemeColor();    },    methods: {      // 定义一个递归函数来依次执行任务      runTasks(index, tasks) {        const self = this;        if (index >= tasks.length) {          // 如果所有任务都已经执行完毕，返回一个 resolved 的 Promise          return Promise.resolve();        }        // 执行当前任务，然后递归执行下一个任务        return tasks[index]().then(function () {          return self.runTasks(index + 1, tasks);        });      },      getSwiperThemeColor() {        const self = this;        const tasks = [];        this.swiperList.forEach((item) => {          tasks.push(function () {            return new Promise((resolve) => {              getImageThemeColor(item.url, "getThemeColorCanvas", (ret) => {                item.themeColor = `rgb(${ret})`;                resolve(ret);              });            });          });        });        // 调用递归函数来执行任务        this.runTasks(0, tasks)          .then(function () {            self.$forceUpdate();            // console.log("All tasks are done!");          })          .catch(function (error) {            console.error(error);          });      },      handleUSwiperChange(e) {        this.swiperCurrent = e.current;      },      handleUSwiperClick(e) {},    },  };</script>

轮播图组件用的 uView 2.x 的 u-swiper组件。

// @/utils/index.js/** * 获取图片主题色 * @param path * 图片的路径，可以是相对路径，临时文件路径，存储文件路径，网络图片路径 * @param canvasId * 画布表示 * @param callback * 回调函数，返回图片主题色的 RGB 颜色值 */export function getImageThemeColor(path, canvasId, callback) {  uni.getImageInfo({    src: path,    success: function (img) {      // 创建一个 Canvas 对象      const ctx = uni.createCanvasContext(canvasId);      // 将图片绘制到 Canvas 上      const imgWidth = 300;      const imgHeight = 150;      ctx.drawImage(img.path, 0, 0, imgWidth, imgHeight);      ctx.save();      ctx.draw(true, () => {        uni.canvasGetImageData({          canvasId: canvasId,          x: 0,          y: 0,          width: imgWidth,          height: imgHeight,          success(res) {            let data = res.data;            let arr = [];            let r = 1,              g = 1,              b = 1;            // 取所有像素的平均值            for (let row = 0; row < imgHeight; row++) {              for (let col = 0; col < imgWidth; col++) {                if (row == 0) {                  r += data[imgWidth * row + col];                  g += data[imgWidth * row + col + 1];                  b += data[imgWidth * row + col + 2];                  arr.push([r, g, b]);                } else {                  r += data[(imgWidth * row + col) * 4];                  g += data[(imgWidth * row + col) * 4 + 1];                  b += data[(imgWidth * row + col) * 4 + 2];                  arr.push([r, g, b]);                }              }            }            // 求取平均值            r /= imgWidth * imgHeight;            g /= imgWidth * imgHeight;            b /= imgWidth * imgHeight;            // 将最终的值取整            r = Math.round(r);            g = Math.round(g);            b = Math.round(b);            if (!!callback) {              // 返回图片主题色的 RGB 颜色值              callback(`${r},${g},${b}`);            }          },        });      });    },  });}

实现效果

关键词：