支付宝和微信收款码二合一(图层合并)
网上看了一下,居然没有开源免费通过图层合并实现的.纯前端项目
在线demo
exe(纯webview套壳,需要webview2,win10以上自带)生成网址
https://wwtw.lanzouq.com/iZe8p2ki938b
macos:
https://wwtw.lanzouq.com/i0lHi2ki96md
html:
https://wwtw.lanzouq.com/iB4P82ki8vsd
源码
主要合并方式实现有三种：
通过 UA 判断
图片合并
第三方支付平台接入
UA（User Agent）判断
原理
根据访问者的 User Agent 信息判断访问者使用的 App（支付宝或微信）。
如果检测到 User Agent 包含微信标识，则跳转微信收款链接。
如果检测到 User Agent 包含支付宝标识，则跳转支付宝收款链接。
优点
实现简单：只需一个中间页面进行 UA 判断并跳转。
可以纯前端,把两个链接都包含在二维码中.
也可以把数据放后端
缺点
UA 可能变更：微信和支付宝的 User Agent 格式可能会更新。
微信不支持直接拉起：需要客户长按识别二维码。
不稳定：需要中间页面的服务器响应。服务器挂了就没办法使用
不安全: 跑路还好,最多不能用.如果后台恶意修改代码,钱就没了
第三方支付平台接入
原理
通过接入第三方支付平台，使用它们提供的 API 同时支持支付宝和微信支付。
优点
功能丰富：支持更多支付方式（如银联、信用卡）。
自动化程度高：无需自行维护逻辑。
缺点
成本较高：需要支付服务费或分成。
依赖第三方服务：平台不可用时可能影响业务。
二维码合并
原理
通过二维码的纠错机制,即使有一部分二维码被覆盖,也能正确解析.
支付宝的链接是https://qr.alipay.com/xxx
微信的链接是wxp://xxxx
微信识别二维码偏向于从左到右识别,支付宝不搭理微信的链接wxp://xxxx
其实不限于支付,其他微信/支付宝扫码都可以这个搞
所以可以这么实现:
把链接解析出来,然后用最高容错H(30%纠错),重新生成二维码
把微信作为底层,支付宝放在上层的右下角
顺时针旋转支付宝180°,防止微信优先识别支付宝二维码
删除支付宝的一部分,防止微信优先识别支付宝二维码
优点
简单易用：纯物理方式。没有服务器,不担心安全问题
缺点
兼容性有限：就能两个,3个(比如)都实现不了。
抗污能力差：如果涂黑了一部分,很容易导致用不了,不再像原生二维码那样有强大纠错能力。
微信拉起失败:极少部分情况下微信还是会打开支付宝的链接
总结
方式
实现复杂度
安全性
费率
多平台
其他
UA 判断
较简单
低
无
支持多个
微信不能直接拉起,需长按识别
图片合并
简单
高
无
仅支持2个
微信极少数情况下会打开支付宝的链接
第三方支付平台
较复杂
看第三方信誉
有
支持很多(比如直接银行卡)
没有任何问题
关键代码
// 绘制支付宝二维码（旋转180度并裁剪）
const alipayPicWidth = qrSize.value / 2
if (alipayQrContent.value) {
const alipayQrCanvas = document.createElement('canvas')
await QRCode.toCanvas(alipayQrCanvas, alipayQrContent.value, {
errorCorrectionLevel: 'H',
margin: picMargin / 2,
width: alipayPicWidth,
color: {
dark: '#000000',
light: '#ffffff'
}
})
// 创建临时画布来处理支付宝二维码
const tempCanvas = document.createElement('canvas')
tempCanvas.width = alipayPicWidth
tempCanvas.height = alipayPicWidth
const tempCtx = tempCanvas.getContext('2d')
if (tempCtx) {
// 绘制原始支付宝二维码
tempCtx.drawImage(alipayQrCanvas, 0, 0, alipayPicWidth, alipayPicWidth)
const clearHeight = alipayPicWidth / 2 / 2
// 清除右下角1/4区域
tempCtx.clearRect(alipayPicWidth / 2 + clearHeight, alipayPicWidth / 2,
alipayPicWidth / 2 - clearHeight, alipayPicWidth / 2)
// 保存当前状态
ctx.save()
// 设置旋转中心点并旋转
ctx.translate(qrPosition.value.x + alipayPicWidth / 2,
qrPosition.value.y + alipayPicWidth / 2)
ctx.rotate(Math.PI)
ctx.translate(-(qrPosition.value.x + alipayPicWidth / 2),
-(qrPosition.value.y + alipayPicWidth / 2))
// 绘制处理后的支付宝二维码
ctx.drawImage(tempCanvas,
qrPosition.value.x,
qrPosition.value.y,
alipayPicWidth,
alipayPicWidth
)
更新
有人反馈支付宝扫不出来 或者微信经常跳
现在添加3个参数供大家测试
目前感觉 横向+从里到外清除+清除50% 效果最好
由于并不知道那种方案最好
添加高级选项,供大家调试
添加背景选项
添加自定义背景
免费评分
参与人数 198吾爱币 +198
热心值 +173
理由
gsh123china
+ 1
+ 1
谢谢@Thanks！
清风阁丶Hunter
+ 1
感谢发布原创作品，吾爱破解论坛因你更精彩！
wlq127
+ 1
+ 1
鼓励转贴优秀软件安全工具和文档！
gzb888
+ 1
+ 1
谢谢@Thanks！
KONKAv983
+ 1
+ 1
谢谢@Thanks！
yundian233
+ 1
+ 1
谢谢@Thanks！
Firefox1
+ 1
热心回复！
VincengGG
+ 1
+ 1
热心回复！
card628
+ 1
热心回复！
alexxi0571
+ 1
+ 1
谢谢@Thanks！
浮尘晓梦
+ 1
谢谢@Thanks！
JiuJingXiaoDu
+ 1
用心讨论，共获提升！
anning666
+ 1
+ 1
用心讨论，共获提升！
BTCQAQ
+ 1
谢谢@Thanks！
heiyue003
+ 1
+ 1
我很赞同！
1000Y
+ 1
+ 1
谢谢@Thanks！
sunline
+ 1
+ 1
谢谢@Thanks！
a446489393
+ 1
+ 1
感谢您的宝贵建议，我们会努力争取做得更好！
italywwy
+ 1
我很赞同！
jsyczxyh
+ 1
我很赞同！
dv99
+ 1
+ 1
谢谢@Thanks！
Icicle丶凌
+ 1
我很赞同！
lemon395
+ 1
+ 1
我很赞同！
Zome
+ 1
+ 1
用心讨论，共获提升！
kyrzy0416
+ 2
+ 1
谢谢@Thanks！
苏紫方璇
+ 7
+ 1
欢迎分析讨论交流，吾爱破解论坛有你更精彩！
52pj420112
+ 1
+ 1
我很赞同！
liu18335229964
+ 1
+ 1
我很赞同！
591550797
+ 1
+ 1
我很赞同！
zj_tj
+ 1
+ 1
热心回复！
ihaveyou
+ 1
热心回复！
wojaiyh
+ 1
+ 1
谢谢@Thanks！
hjsm
+ 1
+ 1
感谢发布原创作品，吾爱破解论坛因你更精彩！
hwf411
+ 1
+ 1
谢谢@Thanks！
ws001980
+ 1
+ 1
谢谢@Thanks！
moonrabbit
+ 1
+ 1
谢谢@Thanks！
吴风
+ 1
谢谢@Thanks！
52bandari
+ 1
+ 1
用心讨论，共获提升！
ag129
+ 1
+ 1
谢谢@Thanks！
zjh106
+ 1
+ 1
热心回复！
iceSleeping
+ 1
+ 1
谢谢@Thanks！
yangqing020629
+ 1
+ 1
我很赞同！
jie520yun
+ 1
+ 1
我很赞同！
xie792
+ 1
+ 1
用心讨论，共获提升！
xiaoyaodulang
+ 1
+ 1
我很赞同！
dzc999
+ 1
+ 1
谢谢@Thanks！
xingchi
+ 1
+ 1
谢谢@Thanks！
小寒丶
+ 1
+ 1
我很赞同！
失落丶月
+ 1
+ 1
我很赞同！
wuqing89403
+ 1
+ 1
谢谢@Thanks！
SangerTom
+ 1
用心讨论，共获提升！
导演
+ 1
+ 1
感谢发布原创作品，吾爱破解论坛因你更精彩！
zhijiandeyanhuo
+ 1
+ 1
谢谢@Thanks！
yuzmb520
+ 1
+ 1
谢谢@Thanks！
leolcg
+ 1
+ 1
我很赞同！
uuiuu
+ 1
我很赞同！
Beast。
+ 2
+ 1
谢谢@Thanks！
旁观者迷
+ 1
+ 1
谢谢@Thanks！
memi
+ 1
+ 1
谢谢@Thanks！
何方妖孽
+ 1
+ 1
鼓励转贴优秀软件安全工具和文档！
wj18235894766
+ 1
+ 1
谢谢@Thanks！
xn2113
+ 1
+ 1
谢谢@Thanks！
Issacclark1
+ 1
谢谢@Thanks！
wwbzmt
+ 1
+ 1
谢谢@Thanks！
awen1344
+ 1
+ 1
鼓励转贴优秀软件安全工具和文档！
myd444
+ 1
鼓励转贴优秀软件安全工具和文档！
skywalkicer
+ 1
+ 1
谢谢@Thanks！
Glaotou
+ 1
+ 1
谢谢@Thanks！
不会化的冰
+ 1
+ 1
热心回复！
mydream_168
+ 1
+ 1
谢谢@Thanks！
liy007
+ 1
用心讨论，共获提升！
Codeman
+ 1
+ 1
我很赞同！
guyuchao3
+ 1
+ 1
我很赞同！
XAQ1113
+ 1
谢谢@Thanks！
Sundy745
+ 1
+ 1
鼓励转贴优秀软件安全工具和文档！
許你①ぜ溫柔
+ 1
+ 1
用心讨论，共获提升！
tanlini
+ 1
+ 1
测试了一下很NICE。
liaryl
+ 1
+ 1
鼓励转贴优秀软件安全工具和文档！
qwer1243
+ 1
+ 1
我很赞同！
cczyx
+ 1
我很赞同！
crbiggun
+ 1
+ 1
我很赞同！
cl836
+ 1
+ 1
谢谢@Thanks！
gxsky
+ 1
+ 1
谢谢大佬！
Jesus1207
+ 1
+ 1
用心讨论，共获提升！
SomeBottle
+ 1
+ 1
谢谢@Thanks！
joeredhair
+ 1
+ 1
谢谢@Thanks！
qiangq233
+ 1
+ 1
热心回复！
星鱼
+ 2
+ 1
谢谢@Thanks！
abc023119
+ 1
+ 1
谢谢@Thanks！
diliuyue
+ 1
谢谢@Thanks！
jb007
+ 1
热心回复！
哒劳德
+ 1
+ 1
我很赞同！
大白康
+ 1
谢谢@Thanks！
奥怪
+ 2
+ 1
用心讨论，共获提升！
wapjzczh
+ 1
+ 1
用心讨论，共获提升！
weidechan
+ 1
感谢发布原创作品，吾爱破解论坛因你更精彩！
啊好菜啊
+ 1
谢谢@Thanks！
a6455081a
+ 1
我很赞同！
shihdhr
+ 1
+ 1
热心回复！
shifuwong
+ 1
谢谢@Thanks！
查看全部评分
