根据银行卡号获取logo，并提取图片主题色（小程序版）

踩坑：
1.推荐微信开发工具调试基础库 -2.23.4（高版本不兼容）
2.https://banklogo.yfb.vercel.app/resource/logo/${银行卡标识}.png，该域名未进行icp备案，正式发布无法使用，
改用https://apimg.alipay.com/combo.png?d=cashier&t=${银行卡标识}_s，
3.在小程序网址里，进入开发管理->开发设置->服务器域名->添加downloadFile合法域名：https://apimg.alipay.com
仅仅展示在页面上可以使用第一个地址，作图片主题色提取使用第二个地址

<template>
	<view class="content bg-page-color">
		<view class="box">
			<view class="item flex flex-row justify-between" :style="{background: `rgba(${bgColor})`}">
				<img class="img-logo" :src="item.bankCardLogo" alt="">
				<canvas
					class="canvas-logo"
					canvas-id="myCanvas"
					id="myCanvas"
				></canvas>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "BankCard",
		data() {
			return {
				authenticate: true,
				cardList: [],
				bgColor: ''
			}
		},
		methods: {
			interfaceBankLogo() {
				// 传入银行卡，调取接口，res里获取银行卡信息
				uni.request({
					url: `https://ccdcapi.alipay.com/validateAndCacheCardInfo.json?_input_charset=utf-8&cardNo=${银行卡号码}&cardBinCheck=true`,
					method:'GET',
					header: {
							'Content-Type': 'application/x-www-form-urlencoded'
					},
					success :(res)=> {
						// 通过bank类型获取对应logo，传入获取主题色
						this.getImageInfo(
							// `https://banklogo.yfb.vercel.app/resource/logo/${res.data.bank}.png`
							// 上面接口由于微信小程序无法处理合法域名，该域名未进行icp备案，因此无法使用，只能用下面的进行主题色提取，但页面的使用可以用上面的地址进行页面logo展示
							`https://apimg.alipay.com/combo.png?d=cashier&t=${res.data.bank}_s`
						)
					}
				})
			},
			// 获取图片信息
			getImageInfo(image) {
				uni.getImageInfo({
					src: image,
					success: (res) => {
						const goodsImg = res
						this.canvasW = 80
						this.canvasH = 80
						setTimeout(() => {
							var ctx = uni.createCanvasContext('myCanvas', this)
							// 填充背景色，白色
							ctx.drawImage(goodsImg.path, 0, 0, this.canvasW, this.canvasW) // drawImage(图片路径,x,y,绘制图像的宽度，绘制图像的高度)
							ctx.draw(true, (ret) => {
								// draw方法 把以上内容画到 canvas 中。
								console.log(ret)
								uni.canvasGetImageData({
									canvasId: 'myCanvas',
									x: 0,
									y: 0,
									width: 80,
									height: 80,
									success: (res) => {
										let data = res.data
										this.getCountsArr(data)
									},
									fail: (fail) => {
										reject(fail)
									}
								})
							})
						}, 0)
					}
				})
			},

			getCountsArr(pixelData) {
				// 分组循环
				let colorList = {} // 颜色值:次数 (rgbaStr: num)=> 统计颜色使用做多的
				// 颜色分组，并作统计分析使用频率
				while (pixelData.length) {
					let data = pixelData.slice(0, 4)
					let rgbaStr = data.join()
					if (
						!colorList[rgbaStr] &&
						rgbaStr != '0,0,0,0' &&
						rgbaStr != '255,255,255,255'
					) {
						// 不存在赋值1
						colorList[rgbaStr] = 1
					} else if (
						rgbaStr != '0,0,0,0' &&
						rgbaStr != '255,255,255,255'
					) {
						// 存在则+1
						colorList[rgbaStr] += 1
					}
					pixelData = pixelData.slice(4)
				}
				// 使用颜色频率数据排序
				let oArr = []
				for (let [key, val] of Object.entries(colorList)) {
					oArr.push({ [key]: val })
				}
				oArr.sort((a, b) => {
					return Object.values(b)[0] - Object.values(a)[0]
				})
				for (let index = 0; index < oArr.length; index++) {
					if (
						Object.keys(oArr[index])[0] !== '255,255,255,255' &&
						Object.keys(oArr[index])[0] !== '0,0,0,0'
					) {
						// 修改透明度
						let newArr = Object.keys(oArr[index])[0].split(',')
						newArr[3] = 0.7
						this.bgColor = newArr.toString()
						this.$forceUpdate()
						return
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		height: 100%;
		min-height: 100vh;
		background: #F4F4F4;
	}
	.box {
		padding: 140rpx 24rpx 0;
		.item {
			position: relative;
			overflow: hidden;
			width: 702rpx;
			height: 248rpx;
			border-radius: 20rpx;
			padding: 24rpx;
			margin-bottom: 16rpx;
			.img-logo {
				position: absolute;
				right: 120rpx;
				top: 30rpx;
				width: 200rpx;
				height: 200rpx;
				z-index: 1;
				opacity: 0.5;
				background: transparent;
			}
			.canvas-logo {
				position: absolute;
				right: -300rpx;
				top: 30rpx;
				width: 200rpx;
				height: 200rpx;
				background: transparent;
			}
		}
	}
</style>