uni-app 实现轮播图组件父容器背景色随图片主题色改变
uni-app 实现轮播图组件父容器背景色随图片主题色改变实现思路
1、获取轮播图主题色，通过 canvas 获取图片主题色。
2、随着轮播图组件图片的轮播，动态设置父容器背景色为图片的主题色。
实现代码
<template>
<view >
<canvas
canvas-id="getThemeColorCanvas"
id="getThemeColorCanvas"
>
</canvas>
<view
:
>
<view
>
<view>
<u-swiper
:list="swiperList"
keyName="url"
@change="handleUSwiperChange"
@click="handleUSwiperClick"
>
</u-swiper>
</view>
</view>
</view>
</view>
</template>轮播图组件用的 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;
g += data;
b += data;
arr.push();
} else {
r += data[(imgWidth * row + col) * 4];
g += data[(imgWidth * row + col) * 4 + 1];
b += data[(imgWidth * row + col) * 4 + 2];
arr.push();
}
}
}
// 求取平均值
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}`);
}
},
});
});
},
});
}实现效果
来源:https://www.cnblogs.com/yuzhihui/p/17223004.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！
页:
[1]