canvas 00_00_00-00_00_30.gif

最近做 uniapp 项目时遇到一个需求，要求模仿腾讯视频 app 首页的背景颜色跟随 banner 图片的主题颜色变化，并且还要兼容 H5、APP、微信小程序三端。

由于项目的技术栈为 uniapp，所以以下使用 uni-ui 的组件库作为栗子。

需求分析

腾讯视频 app 效果如下：

从上图看出，大致分为两步：

1.获取图片主题色

2.设置从上到下的主题色to白色的渐变：

background: linear-gradient(to bottom, 主题色，白色)

获取主题色主要采用canvas绘图，绘制完成后获取r、g、b三个通道的颜色像素累加值，最后再分别除以画布大小，得到每个颜色通道的平均值即可。

搭建页面结构

page.vue

<template>
  <view class="index">
    <!-- 由于获取主题色需要canvas绘制。绝对定位，把canvas移除屏幕外绘制 -->
    <canvas
      canvas-id="canvas"
      style="position: absolute;left: -400px;"
    ></canvas>
    <!-- box：填充主题颜色容器 -->
    <view class="box" :style="[getStyle]">
      <!-- 其他内容 -->
      <view class="tabs"></view>
      <!-- 轮播图 -->
      <swiper
        class="swiper"
        :current="current"
        circular
        autoplay
        indicator-dots
        @change="onChange"
        :interval="3000"
      >
        <swiper-item class="swiper-item" v-for="(url, i) in list" :key="i">
          <image :src="url" mode="aspectFill"></image>
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>

<script>
import { getImageThemeColor } from "@/utils/index";
export default {
  data() {
    return {
      // 图片列表
      list: [],
      // 当前轮播图索引
      current: 0,
      // 缓存banner图片主题色
      colors: [],
      // 记录当前提取到第几张banner图片
      count: 0,
    };
  },
  computed: {
    // 动态设置banner主题颜色背景
    getStyle() {
      const color = this.colors[this.current];
      return {
        background: color
          ? `linear-gradient(to bottom, rgb(${color}), #fff)`
          : "#fff",
      };
    },
  },
  methods: {
    // banner改变
    onChange(e) {
      this.current = e.target.current;
    },
    getList() {
      this.list = [
        "https://img.zcool.cn/community/0121e65c3d83bda8012090dbb6566c.jpg@3000w_1l_0o_100sh.jpg",
        "https://img.zcool.cn/community/010ff956cc53d86ac7252ce64c31ff.jpg@900w_1l_2o_100sh.jpg",
        "https://img.zcool.cn/community/017fc25ee25221a801215aa050fab5.jpg@1280w_1l_2o_100sh.jpg",
      ];
    },
    // 获取主题颜色
    getThemColor() {
      getImageThemeColor(this, this.list[this.count], "canvas", (color) => {
        const colors = [...this.colors];
        colors[this.count] = color;
        this.colors = colors;
        this.count++;
        if (this.count < this.list.length) {
          this.getThemColor();
        }
      });
    },
  },
  onLoad() {
    this.getList();
    // banner图片请求完成后，获取主题色
    this.getThemColor();
  },
};
</script>

<style>
.box {
  display: flex;
  flex-direction: column;
  background-color: deeppink;
  padding: 10px;
}

.tabs {
  height: 100px;
  color: #fff;
}

.swiper {
  width: 95%;
  height: 200px;
  margin: auto;
  border-radius: 10px;
  overflow: hidden;
}

image {
  width: 100%;
  height: 100%;
}
</style>

封装获取图片主题颜色函数

先简单讲下思路 （想直接看源码可直接跳到下面） 。先通过 request 请求图片地址，获取图片的二进制数据，再将图片资源其转换成 base64，调用drawImage进行绘图，最后调用draw方法绘制到画布上。

CanvasContext.draw 介绍

更多 api 使用方法可参考：uniapp 官方文档

getImageThemeColor.js

/**
 * 获取图片主题颜色
 * @param path 图片的路径
 * @param canvasId 画布id
 * @param success 获取图片颜色成功回调，主题色的RGB颜色值
 * @param fail 获取图片颜色失败回调
 */
export const getImageThemeColor = (
  that,
  path,
  canvasId,
  success = () => {},
  fail = () => {}
) => {
  // 获取图片后缀名
  const suffix = path.split(".").slice(-1)[0];
  // uni.getImageInfo({
  //   src: path,
  //   success: (e) => {
  //     console.log(e.path) // 在安卓app端，不管src路径怎样变化，path路径始终为第一次调用的图片路径
  //   }
  // })
  // 由于getImageInfo存在问题，所以改用base64
  uni.request({
    url: path,
    responseType: "arraybuffer",
    success: (res) => {
      let base64 = uni.arrayBufferToBase64(res.data);
      const img = {
        path: `data:image/${suffix};base64,${base64}`,
      };
      // 创建canvas对象
      const ctx = uni.createCanvasContext(canvasId, that);

      // 图片绘制尺寸
      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,
            fail: fail,
            success(res) {
              let data = res.data;
              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];
                  } else {
                    r += data[(imgWidth * row + col) * 4];
                    g += data[(imgWidth * row + col) * 4 + 1];
                    b += data[(imgWidth * row + col) * 4 + 2];
                  }
                }
              }
              // 求rgb平均值
              r /= imgWidth * imgHeight;
              g /= imgWidth * imgHeight;
              b /= imgWidth * imgHeight;
              // 四舍五入
              r = Math.round(r);
              g = Math.round(g);
              b = Math.round(b);
              success([r, g, b].join(","));
            },
          },
          that
        );
      });
    },
  });
};