Payment QR merger
Work out the layout for merging WeChat and Alipay payment QRs into one image: canvas size plus exact draw rectangles for both codes, with side-by-side or stacked layouts, spacing, padding, title bars and a configurable background.
Runs in your browserEvery computation happens in your browser — your data never leaves this device.
Layout plan
Canvas size and the draw rectangles for both codes.
Enter the QR size to calculate
Canvas width: 0 · Canvas height: 0 · Gap: 0 · Padding: 0
What this tool does
- Street stalls and small shops: merge the WeChat and Alipay QRs into one sheet so customers do not have to ask which to scan.
- Build a payment standee: use the stacked layout with title bars labelled 'WeChat Pay' and 'Alipay'.
- Batch output: hand the computed draw rectangles to Canvas or ImageMagick and generate a whole set from a script.
- Verify geometry: the canvas check line shows the parts summing to the canvas width, so nothing lands half a pixel off.
Example
Input
430,430
Output
二维码尺寸：430 × 430 像素（两张按同尺寸处理） 布局：左右并排，间距 24 px，边距 24 px，标题栏 56 px 画布尺寸：932 × 534 像素 第一张绘制于：x=24 y=80 w=430 h=430 第二张绘制于：x=478 y=80 w=430 h=430 背景色：#ffffff 画布尺寸校验：24 + 430 + 24 + 430 + 24 = 932
Side by side: width = padding×2 + width + gap + width; stacked: height = padding×2 + 2×title + both heights + gap.
Frequently asked questions
How is the canvas size derived?
Side by side: width = padding×2 + width + gap + width and height = padding×2 + title + height. Stacked: width = padding×2 + width and height = padding×2 + 2×title + height + gap + height. For 430×430 codes with gap 24, padding 24 and a 56 px title, the side-by-side canvas is 932 × 534.
What if the two QRs differ in size?
The tool treats them as equal (the second matches the first). If your images really differ, scale the smaller one up proportionally first; the side-by-side layout centres the shorter image vertically and the stacked layout centres the narrower one horizontally, so small differences still look tidy.
What is the title bar for?
Reserved text height above each code (56 px by default) for labels such as 'WeChat Pay' and 'Alipay'. Set it to 0 to drop the bars and let the images sit against the padding.
Is the merge done in the browser?
Yes. This module only computes geometry (canvas size and draw rectangles); the actual pixel compositing happens locally in a Canvas on the page, and the images are never uploaded.
Does the background support transparency?
Only six-digit hex colours such as #RRGGBB are accepted (white by default). Transparent backgrounds often print as black, so a white base is the safest choice for payment codes.
What spacing should I use?
24 px gap and padding look good on screen and in print. Tighten to 8–12 px for a compact sticker, or scale everything up proportionally for large-format printing (for example 40 px gaps with 430 px codes).
Keywords：收款码合并微信支付宝二维码合并payment qr merge收款码布局计算canvas 布局