按 ISO 7810 ID-1 尺寸做卡面的纯前端工具。传一张图，摆上 logo，导出一张静态 PNG。
在线试用：https://susie-meow.github.io/card-design-generator/
- 上传底图，自动按 ID-1 卡面比例填满并居中
- 裁剪时比例锁死，怎么裁都是 1.586 : 1
- 再传一张参考图，走同一套匹配与裁剪流程，叠在卡面之上、logo 之下，以可调的不透明度对位；只作参考，不进导出
- 上传 logo，可以一次选多个，也能直接拖进来
- 摆位、缩放、旋转、调透明度，还能给 logo 去底色
- 选中 logo 后可用方向键微调位置
- 给 logo 加外描边，底色和 logo 撞色时也能看清；颜色可以自动取对比色，也能自己挑
- 导出 1536 × 969 的 PNG，换算下来印刷精度约 455 DPI，够印
- 中英双语
项目里没有内置任何 logo 或模板，素材全部由你自己上传。
直接用浏览器打开 index.html 就可以，不需要装依赖，也不需要构建。
如果想用本地服务器：
python3 -m http.server 8000
ISO 7810 ID-1 就是银行卡、交通卡用的那套规格：85.60 × 53.98 mm，宽高比约 1.586 : 1，圆角 3.18 mm。
导出画布固定 1536 × 969 px，按 85.60 mm 宽折算约 455 DPI（与 Apple Wallet 卡面 cardBackgroundCombined@3x.png 的目标分辨率一致）。预览默认按 3.18 mm 圆角显示，导出同步；要留直角出血的话，把预览下方那个勾去掉再导出。
描边是照着 logo 的轮廓往外长的，不是压在 logo 上描一圈。做法是把 logo 的 alpha 通道当成蒙版，先算一遍「每个像素离图形本体有多远」的距离场，再只在不透明区域之外按距离填色。所以：
- logo 有镂空（比如中空的圆环）不会被糊死，孔洞照旧是空的
- 描边不会盖住 logo 本身，形状、比例、清晰度都不动
- 边缘用 1 px 的覆盖率做过渡，放大看不出台阶
- 描边跟着位置、大小、旋转、透明度一起走，透明度调低时描边同步变淡
三项参数：
| 参数 | 范围 | 说明 |
|---|---|---|
| 外描边 | 开 / 关 | 默认开。关掉就完全不画，logo 恢复原样 |
| 描边宽度 | 0 – 40 px | 单位是导出画布像素（1536 × 969 那张）。0 等于不画。默认按 logo 尺寸给 3 – 8 px |
| 描边颜色 | 色板 + 自动对比色 | 勾上「自动对比色」时按 logo 主体的平均亮度自动选：浅色 logo 配 #111A2B，深色 logo 配纯白，色板锁定显示当前实际用的颜色。取消勾选就能自己取色 |
宽度是导出画布上的绝对像素，所以所见即所得——预览里多宽，导出的 PNG 里就多宽。
参考图是给自己对位用的第二张图。上传、重新匹配、裁剪的流程和卡面图片完全一样，比例同样锁死 1.586 : 1，裁剪弹窗也是同一个。
图层顺序是 卡面 → 参考图 → logo。
它只存在于预览画布上。导出的 PNG 不含参考图。
- 图片处理全部在浏览器本地完成，你上传的素材不会传到任何服务器
- 打开时会先弹一次使用条款，确认后才能继续
- 输出只是一张视觉设计文件，它不代表任何机构发行的支付卡或交通卡。不要拿去伪造、冒充或制作可用于交易的凭证；印设计稿、艺术卡、收藏卡、桌游卡这些不受影响
- 本项目与 Apple、Apple Pay、Visa、Mastercard 以及任何发卡机构没有官方合作、授权、隶属或背书关系。第三方商标归各自权利人所有
单个 index.html，原生 Canvas 2D，没有框架、没有依赖、也没有构建步骤。字体走 Google Fonts，加载不到会退回系统字体，不影响功能。
This project is licensed under the MIT License. See the LICENSE file for details. Users are responsible for ensuring that they have the necessary rights to use any third-party images, logos, or other assets they upload.