Fallstricke:
1. Empfehlen Sie die Debugging-Basisbibliothek des WeChat-Entwicklungstools 2.23.4 (höhere Version ist nicht kompatibel).
2. https://banklogo.yfb.vercel.app/resource/logo/${银行卡标识}.pngDieser Domainname wurde nicht bei ICP registriert und kann nicht für die offizielle Veröffentlichung verwendet werden. Verwenden Sie
ihn stattdessen https://apimg.alipay.com/combo.png?d=cashier&t=${银行卡标识}_s.
3. Im Mini Geben Sie auf der Programmwebsite die Entwicklungsverwaltung -> Entwicklungseinstellungen -> Serverdomänenname -> Downloaddatei hinzufügen ein. Legaler Domänenname: https://apimg.alipay.com
Sie können die erste Adresse nur für die Anzeige auf der Seite verwenden und die zweite Adresse für die Farbextraktion des Bildthemas verwenden.
<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>