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

玉浩波

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

实现思路

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

1. <template>
2.   <view >
3.     <canvas
4.       canvas-id="getThemeColorCanvas"
5.       id="getThemeColorCanvas"
6.       
7.     >
8.     </canvas>
10.     <view
11.       
12.       :
13.     >
14.       <view
15.         
16.         
17.       >
18.         <view  >
19.           <u-swiper
20.             :list="swiperList"
21.             keyName="url"
22.             @change="handleUSwiperChange"
23.             @click="handleUSwiperClick"
24.           >
25.           </u-swiper>
26.         </view>
27.       </view>
28.     </view>
29.   </view>
30. </template>

复制代码

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

1. // @/utils/index.js
3. /**
4. * 获取图片主题色
5. * @param path
6. * 图片的路径，可以是相对路径，临时文件路径，存储文件路径，网络图片路径
7. * @param canvasId
8. * 画布表示
9. * @param callback
10. * 回调函数，返回图片主题色的 RGB 颜色值
11. */
12. export function getImageThemeColor(path, canvasId, callback) {
13.   uni.getImageInfo({
14.     src: path,
15.     success: function (img) {
16.       // 创建一个 Canvas 对象
17.       const ctx = uni.createCanvasContext(canvasId);
18.       // 将图片绘制到 Canvas 上
19.       const imgWidth = 300;
20.       const imgHeight = 150;
21.       ctx.drawImage(img.path, 0, 0, imgWidth, imgHeight);
22.       ctx.save();
23.       ctx.draw(true, () => {
24.         uni.canvasGetImageData({
25.           canvasId: canvasId,
26.           x: 0,
27.           y: 0,
28.           width: imgWidth,
29.           height: imgHeight,
30.           success(res) {
31.             let data = res.data;
32.             let arr = [];
33.             let r = 1,
34.               g = 1,
35.               b = 1;
36.             // 取所有像素的平均值
37.             for (let row = 0; row < imgHeight; row++) {
38.               for (let col = 0; col < imgWidth; col++) {
39.                 if (row == 0) {
40.                   r += data[imgWidth * row + col];
41.                   g += data[imgWidth * row + col + 1];
42.                   b += data[imgWidth * row + col + 2];
43.                   arr.push([r, g, b]);
44.                 } else {
45.                   r += data[(imgWidth * row + col) * 4];
46.                   g += data[(imgWidth * row + col) * 4 + 1];
47.                   b += data[(imgWidth * row + col) * 4 + 2];
48.                   arr.push([r, g, b]);
49.                 }
50.               }
51.             }
52.             // 求取平均值
53.             r /= imgWidth * imgHeight;
54.             g /= imgWidth * imgHeight;
55.             b /= imgWidth * imgHeight;
56.             // 将最终的值取整
57.             r = Math.round(r);
58.             g = Math.round(g);
59.             b = Math.round(b);
61.             if (!!callback) {
62.               // 返回图片主题色的 RGB 颜色值
63.               callback(`${r},${g},${b}`);
64.             }
65.           },
66.         });
67.       });
68.     },
69.   });
70. }

复制代码

实现效果

来源:https://www.cnblogs.com/yuzhihui/p/17223004.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！