Skip to content

renderDrivingLicense

使用 Canvas 渲染中国行驶证的正反面(简化版样式,仅用于演示/测试)。

前置依赖

依赖参数

参数名类型说明
deps.createCanvas(width: number, height: number) => CanvasLike创建指定大小的 Canvas 对象
deps.ImageWindow['Image']Image 构造函数

环境要求

  • 浏览器环境: 需要支持 Canvas API

函数签名

typescript
function renderDrivingLicense(
  profile: GeneratedDrivingLicenseProfile,
  deps: RenderDrivingLicenseDeps,
  options?: RenderDrivingLicenseOptions
): RenderDrivingLicenseResult

interface RenderDrivingLicenseOptions {
  /** 所有人姓名(默认从 profile 中获取) */
  owner?: string
}

interface RenderDrivingLicenseDeps {
  /** 创建指定大小的 Canvas 对象 */
  createCanvas: (width: number, height: number) => CanvasLike
  /** Image 构造函数 */
  Image: Window['Image']
}

interface RenderDrivingLicenseResult {
  /** 行驶证正面 Canvas */
  front: CanvasLike
  /** 行驶证反面 Canvas */
  back: CanvasLike
}

参数

参数名类型必填说明
profileGeneratedDrivingLicenseProfile行驶证信息(由 generateFakeDrivingLicense 生成)
depsRenderDrivingLicenseDeps环境依赖,提供 createCanvasImage 方法
optionsRenderDrivingLicenseOptions渲染选项,可覆盖所有人姓名

返回值

类型说明
RenderDrivingLicenseResult包含正面和反面 Canvas 对象,可用于导出图片或展示

工作原理

  1. 通过 deps.createCanvas 创建画布(标准尺寸:856×540 像素)
  2. 正面绘制:
    • 标题:"中华人民共和国机动车行驶证"
    • 基本信息:号牌号码、车辆类型、所有人、住址、使用性质
    • 技术信息:发动机号码、车辆识别代号、注册日期、发证日期
  3. 反面绘制:
    • 标题:"中华人民共和国机动车行驶证"
    • 详细信息:档案编号、核定载人数、总质量、整备质量、核定载质量
    • 尺寸信息:外廓尺寸、准牵引总质量、驾驶室载客、货厢内部尺寸
    • 其他信息:后轴钢板弹簧片数、车辆出厂日期、发证机关
  4. 返回渲染好的正面和反面 Canvas 对象

说明:此实现仅为演示用途,非真实制式版式与字体布局。