renderBankCard

使用 Canvas 渲染银行卡正面示意图，可与 generateFakeBankCard 组合生成完整的演示素材。

配置选项

品牌UnionPayVISAMastercardJCBAMEX

卡等级经典卡金卡白金卡钻石卡

主题蓝宝石翡翠绿赤焰金碳纤黑

持卡人

卡片预览

点击上方按钮生成银行卡示意图

当前配置

银行

卡号

品牌

等级

有效期

→

前置依赖

依赖参数

参数名	类型	说明
deps.createCanvas	(width: number, height: number) => CanvasLike	创建指定尺寸的 Canvas；浏览器环境可直接使用 document.createElement('canvas')

环境要求

• 需要支持 Canvas 的环境（浏览器、Node.js + canvas polyfill、skia-canvas 等）
• 如果需要导出图片，请确保 Canvas 对象实现 toDataURL/toBuffer

函数签名

function renderBankCard(
  profile: GeneratedBankCardProfile,
  deps: RenderBankCardDeps,
  options?: RenderBankCardOptions
): RenderBankCardResult

interface RenderBankCardOptions {
  resolution?: 'standard' | 'retina'
  cornerRadius?: number
  showSignaturePanel?: boolean
}

interface RenderBankCardDeps {
  createCanvas: (width: number, height: number) => CanvasLike
}

interface RenderBankCardResult {
  canvas: CanvasLike
}

参数

参数名	类型	必填	说明
profile	GeneratedBankCardProfile	是	银行卡资料，可由 generateFakeBankCard 生成或自定义
deps	RenderBankCardDeps	是	环境依赖，仅包含 createCanvas
options	RenderBankCardOptions	否	渲染配置，如分辨率、圆角大小、是否绘制签字栏

返回值

类型	说明
RenderBankCardResult	返回包含单张 Canvas 的对象，可直接导出图片或插入 DOM

工作原理

1. 根据分辨率计算银行卡标准比例（85.6mm × 53.98mm，对应约 1.585:1）
2. 生成渐变背景与图案纹理，模拟金属/玻璃材质
3. 绘制芯片、非接触标识、签字栏等常见元素
4. 根据 profile 展示银行名称、卡号、持卡人和有效期
5. 输出最终 Canvas 供后续 toDataURL、下载或嵌入页面