uni-app 實作輪播圖組件父容器背景色隨圖片主題色改變

實作思路

1、獲取輪播圖主題色，通過 canvas 獲取圖片主題色，
2、隨著輪播圖組件圖片的輪播，動態設定父容器背景色為圖片的主題色，

實作代碼

<template>
  <view >
    <canvas
      canvas-id="getThemeColorCanvas"
      id="getThemeColorCanvas"
      style="position: absolute;left: -600rpx;top: -300rpx;"
    >
    </canvas>

    <view
      
      :style="{ background: swiperList[swiperCurrent].themeColor || '#F35B30' }"
    >
      <view
        
        style="width: 100%;height: 216rpx;display: flex;justify-content: center;"
      >
        <view  style="width: 100%;height: 216rpx;margin-top: 20rpx;">
          <u-swiper
            :list="swiperList"
            keyName="url"
            @change="handleUSwiperChange"
            @click="handleUSwiperClick"
          >
          </u-swiper>
        </view>
      </view>
    </view>
  </view>
</template>

<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,
      };
    },
    onl oad() {
      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>

<style scoped>
  .container {
    min-height: 100vh;
    background: #f1f2f5;
  }

  .home-head {
    width: 100%;
    height: 532rpx;
    background: #f35b30;
    border-radius: 0px 0px 52px 52px;

    padding: 0px 30rpx;
  }
</style>

輪播圖組件用的 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 = https://www.cnblogs.com/yuzhihui/p/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}`);
            }
          },
        });
      });
    },
  });
}

實作效果

作者：飛仔FeiZai

出處：https://www.cnblogs.com/yuzhihui/p/17223004.html

宣告：歡迎任何形式的轉載，但請務必注明出處！！！

標籤：JavaScript

上一篇：前端設計模式——組合模式

下一篇：前端設計模式——組合模式