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

来源:https://www.cnblogs.com/yuzhihui/archive/2023/03/17/17223004.html
-Advertisement-
Play Games

uni-app 實現輪播圖組件父容器背景色隨圖片主題色改變 實現思路 1、獲取輪播圖主題色,通過 canvas 獲取圖片主題色。 2、隨著輪播圖組件圖片的輪播,動態設置父容器背景色為圖片的主題色。 實現代碼 <template> <view class="container"> <canvas ca ...


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

實現思路

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

實現代碼

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

    <view
      class="home-head"
      :style="{ background: swiperList[swiperCurrent].themeColor || '#F35B30' }"
    >
      <view
        class=""
        style="width: 100%;height: 216rpx;display: flex;justify-content: center;"
      >
        <view class="" 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,
      };
    },
    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>

<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 = 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}`);
            }
          },
        });
      });
    },
  });
}

實現效果

img

作者:飛仔FeiZai

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

聲明:歡迎任何形式的轉載,但請務必註明出處!!!


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • MySql存儲結構 參考視頻:MySql存儲結構 1.表空間 不同的存儲引擎在磁碟文件上的結構均不一致,這裡以InnoDB為例: CREATE TABLE t(id int(11)) Engine = INNODB; 在新表創建的過程中,InnoDB會在磁碟的data目錄下創建與這個表對應的兩個文件 ...
  • 您可以使用以下 SQL 語句刪除 MS SQL Server 表中重覆的行: WITH CTE AS ( SELECT ROW_NUMBER() OVER(PARTITION BY column1, column2, ... columnN ORDER BY (SELECT 0)) RN FROM ...
  • 摘要:DWS的PL/pgSQL函數/存儲過程中有一個特殊的語法PERFORM語法,用於執行語句但是丟棄執行結果的場景,常用於一些狀態判斷的場景。 本文分享自華為雲社區《GassDB(DWS)功能 -- 函數出參 #【玩轉PB級數倉GaussDB(DWS)】》,作者:譡里個檔。 DWS的PL/pgSQ ...
  • 大資管包括原銀保監監管下的銀行理財、信托、保險,原證監會監管下的公募基金、私募基金專戶及基金子公司、券商資管以及期貨資管。據統計,2022年底資管行業的資產管理規模也達到了136萬億元。 在《商業銀行理財業務監督管理辦法》《關於規範金融機構資產管理業務的指導意見》等理財新規、資管新規的要求下,大資管 ...
  • 數據湖作為新一代大數據基礎設施,近年來持續火熱,許多前線的同學都在討論數據湖應該怎麼建,許多企業也都在構建或者計劃構建自己的數據湖。基於此,自然引發了許多關於數據湖選型的討論和探究。但是經過搜索之後我們發現,網上現存的很多內容都是基於較早之前的開源信息做出的結論,在企業調研初期容易造成不准確的印象和 ...
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 組件介紹 關於web端的右鍵功能常用的地方有表格的右鍵,或者tab標簽的右鍵等,本文記錄一下封裝一個右鍵菜單組件的思路步驟代碼。 程式員除了會用輪子,還要嘗試去貼合自己公司業務場景造輪子。 組件效果圖 我們先看一下右鍵組件的效果圖 組件分 ...
  • Vue進階 生命周期 組件運行的過程 組件的生命周期是:組件從創建->運行(渲染)->銷毀的整個過程,是一個時間段 如何監聽組件的不同時刻 vue框架為組件內置了不同時刻的生命周期函數,是他在關鍵時刻幫我們調用的一些特殊名稱的函數,生命周期函數會伴隨著組件的運行而自動調用。 created函數 組件 ...
  • 模板語法 插值語法 Mustache插值採用{{ }},用於解析標簽體內容,將Vue實例中的數據插入DOM中 <h1>Hello {{name}}</h1> 指令語法 指令用於解析標簽,是vue為開發者提供的一套模板語法,輔助開發者渲染頁面的基本結構。 (指令是vue開發中最基礎、最常用、最簡單的知 ...
一周排行
    -Advertisement-
    Play Games
  • 概述:在C#中,++i和i++都是自增運算符,其中++i先增加值再返回,而i++先返回值再增加。應用場景根據需求選擇,首碼適合先增後用,尾碼適合先用後增。詳細示例提供清晰的代碼演示這兩者的操作時機和實際應用。 在C#中,++i 和 i++ 都是自增運算符,但它們在操作上有細微的差異,主要體現在操作的 ...
  • 上次發佈了:Taurus.MVC 性能壓力測試(ap 壓測 和 linux 下wrk 壓測):.NET Core 版本,今天計劃準備壓測一下 .NET 版本,來測試並記錄一下 Taurus.MVC 框架在 .NET 版本的性能,以便後續持續優化改進。 為了方便對比,本文章的電腦環境和測試思路,儘量和... ...
  • .NET WebAPI作為一種構建RESTful服務的強大工具,為開發者提供了便捷的方式來定義、處理HTTP請求並返迴響應。在設計API介面時,正確地接收和解析客戶端發送的數據至關重要。.NET WebAPI提供了一系列特性,如[FromRoute]、[FromQuery]和[FromBody],用 ...
  • 原因:我之所以想做這個項目,是因為在之前查找關於C#/WPF相關資料時,我發現講解圖像濾鏡的資源非常稀缺。此外,我註意到許多現有的開源庫主要基於CPU進行圖像渲染。這種方式在處理大量圖像時,會導致CPU的渲染負擔過重。因此,我將在下文中介紹如何通過GPU渲染來有效實現圖像的各種濾鏡效果。 生成的效果 ...
  • 引言 上一章我們介紹了在xUnit單元測試中用xUnit.DependencyInject來使用依賴註入,上一章我們的Sample.Repository倉儲層有一個批量註入的介面沒有做單元測試,今天用這個示例來演示一下如何用Bogus創建模擬數據 ,和 EFCore 的種子數據生成 Bogus 的優 ...
  • 一、前言 在自己的項目中,涉及到實時心率曲線的繪製,項目上的曲線繪製,一般很難找到能直接用的第三方庫,而且有些還是定製化的功能,所以還是自己繪製比較方便。很多人一聽到自己畫就害怕,感覺很難,今天就分享一個完整的實時心率數據繪製心率曲線圖的例子;之前的博客也分享給DrawingVisual繪製曲線的方 ...
  • 如果你在自定義的 Main 方法中直接使用 App 類並啟動應用程式,但發現 App.xaml 中定義的資源沒有被正確載入,那麼問題可能在於如何正確配置 App.xaml 與你的 App 類的交互。 確保 App.xaml 文件中的 x:Class 屬性正確指向你的 App 類。這樣,當你創建 Ap ...
  • 一:背景 1. 講故事 上個月有個朋友在微信上找到我,說他們的軟體在客戶那邊隔幾天就要崩潰一次,一直都沒有找到原因,讓我幫忙看下怎麼回事,確實工控類的軟體環境複雜難搞,朋友手上有一個崩潰的dump,剛好丟給我來分析一下。 二:WinDbg分析 1. 程式為什麼會崩潰 windbg 有一個厲害之處在於 ...
  • 前言 .NET生態中有許多依賴註入容器。在大多數情況下,微軟提供的內置容器在易用性和性能方面都非常優秀。外加ASP.NET Core預設使用內置容器,使用很方便。 但是筆者在使用中一直有一個頭疼的問題:服務工廠無法提供請求的服務類型相關的信息。這在一般情況下並沒有影響,但是內置容器支持註冊開放泛型服 ...
  • 一、前言 在項目開發過程中,DataGrid是經常使用到的一個數據展示控制項,而通常表格的最後一列是作為操作列存在,比如會有編輯、刪除等功能按鈕。但WPF的原始DataGrid中,預設只支持固定左側列,這跟大家習慣性操作列放最後不符,今天就來介紹一種簡單的方式實現固定右側列。(這裡的實現方式參考的大佬 ...