uni根据图片获取其主题颜色

<template>
	<view class="content" :style="{background:Bg}">
		<image class="logo" :src="img" id="loadImg"></image>
		<canvas canvas-id="myCanvas" class="canvas"></canvas>
	</view>
</template>

<script>
	var _this;
	export default {
		data() {
			return {
				img: 'https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3880341262,3308316348&fm=26&gp=0.jpg',
				Bg: "", //背景颜色
			}
		},
		onLoad() {
			_this = this;
			_this.$nextTick(function() {
				_this.getImageColor("myCanvas", "loadImg", this.img).then(res => {
					if(res!=''){
						_this.Bg = 'rgba('+res.r+','+res.g+','+res.b+',1)';
					}
				})
			});
		},
		methods: {
			/**
			 * 求图片主题颜色
			 * @param {String} canvasID 画布ID
			 * @param {String} imgID 图片ID
			 * @param {String} imgSrc 图片资源路径
			 * */
			getImageColor:function(canvasID, imgID, imgSrc){
				let imgWidth,
					imgHeight;
				let canvasWidth,
					canvasHeight;
				var canvas = uni.createCanvasContext(canvasID);
				// 获取img的宽度/高度
				var pro = function() {
					return new Promise((resolve, reject) => {
						uni.createSelectorQuery().select("#" + imgID).boundingClientRect(ret => {
							imgWidth = ret.width;
							imgHeight = ret.height;
								
							// 赋值canvas宽度/高度
							canvasWidth = imgWidth;
							canvasHeight = imgHeight;
							canvas.drawImage(imgSrc, 0, 0, canvasWidth, canvasHeight);
							canvas.draw(true, () => {
								// 获取像素数据
								uni.canvasGetImageData({
									// #ifdef MP-WEIXIN
									canvasId: canvas.canvasId,
									// #endif
									// #ifndef MP-WEIXIN
									canvasId: canvas.id,
									// #endif
									x: 0,
									y: 0,
									width: imgWidth,
									height: imgHeight,
									success: (res) => {
										let data = res.data;
										var r = 1,
											g = 1,
											b = 1;
										// 取所有像素的平均值
										for (var row = 0; row < imgHeight; row++) {
											for (var col = 0; col < imgWidth; col++) {
												// console.log(data[((img.width * row) + col) * 4])
												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];
												}
											}
										}
										// 求取平均值
										r /= (imgWidth * imgHeight);
										g /= (imgWidth * imgHeight);
										b /= (imgWidth * imgHeight);
										// 将最终的值取整
										r = Math.round(r);
										g = Math.round(g);
										b = Math.round(b);
										let obj = {
											r,
											g,
											b
										}
										resolve(obj);
									},
									fail: (fail) => {
										reject(fail);
									}
								});
							});
								
						}).exec();
					}).catch(e => {
						console.log(e)
					})
				}
				return pro();
			}
		}
	}
</script>

<style>
	.content {
		width: 100%;
		height: 500rpx;
		box-sizing: border-box;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
	}
	.canvas{
		position: absolute;
		height: 200rpx;
		width: 200rpx;
		opacity: 0;
	}
</style>