Obtenez le logo en fonction du numéro de carte bancaire et extrayez la couleur du thème de l'image (version mini programme)

Marcher sur la fosse :
1. Recommander les outils de développement WeChat pour déboguer la bibliothèque de base-2.23.4 (la version supérieure n'est pas compatible)
2. https://banklogo.yfb.vercel.app/resource/logo/${银行卡标识}.pngLe nom de domaine n'a pas été enregistré pour icp et il ne peut pas être utilisé après la sortie officielle. 3. Dans l'URL du petit programme, entrez le développement Gestion->Paramètres de développement->Nom
de domaine du serveur->Ajouter le nom de domaine légal du fichier de téléchargement : la première adresse ne peut être utilisée que pour l'affichage sur la page, et la seconde l'adresse peut être utilisée pour l'extraction des couleurs du thème de l'imagehttps://apimg.alipay.com/combo.png?d=cashier&t=${银行卡标识}_s
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>