generatePlaceholderImage

根据宽高比和宽度生成包含随机形状的占位图。

配置选项

宽度（像素）

宽高比（格式：宽:高，例如 16:9 或 100:101）

每次生成都会随机选择形状和颜色组合

高度：450 像素

预览

生成中...

前置依赖

依赖参数

参数名	类型	说明
deps.createCanvas	(width: number, height: number) => CanvasLike	创建指定大小的 Canvas 对象（浏览器可用 document.createElement('canvas') 实现）

环境要求

• 浏览器环境: 使用 document.createElement('canvas') 创建 Canvas
• Node.js 环境: 需要使用 canvas 库或类似的 Canvas 实现

函数签名

function generatePlaceholderImage(
  options: GeneratePlaceholderImageOptions,
  deps: GeneratePlaceholderImageDeps
): GeneratePlaceholderImageResult

interface GeneratePlaceholderImageOptions {
  width: number
  aspectRatio: number
}

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

interface GeneratePlaceholderImageResult {
  canvas: CanvasLike
  toDataURL?: (type?: string, quality?: number) => string
}

参数

参数名	类型	必填	默认值	说明
options.width	number	是	-	宽度（像素）
options.aspectRatio	number	是	-	宽高比（width/height），例如 16/9 或从 "16:9" 解析得到
deps	GeneratePlaceholderImageDeps	是	-	环境依赖，提供 createCanvas 方法

返回值

类型	说明
GeneratePlaceholderImageResult	包含 Canvas 对象和可选的 toDataURL 方法

工作原理

1. 根据提供的 width 和 aspectRatio 计算高度：height = width / aspectRatio
2. 通过 deps.createCanvas 创建指定尺寸的 Canvas
3. 随机选择一个预定义的颜色组合（包含背景色、形状颜色和文字颜色）
4. 随机选择一种图案类型：
   • simple：简单形状（矩形、圆形、三角形、星形、菱形、多边形）
   • card-back：卡牌背面风格（装饰性边框、四角装饰、中心图案、装饰环）
   • mandala：曼陀罗风格（多层花瓣、对称图案、连接线）
   • geometric：几何重复图案（重复的圆形、正方形、三角形、菱形）
   • ornamental：装饰性图案（边框装饰、多层装饰元素、中心星形）
5. 绘制背景色填充整个画布
6. 根据选择的图案类型绘制相应的复杂图案
7. 在图案下方显示尺寸文字（格式：宽度 × 高度）
8. 返回 Canvas 对象，浏览器环境还会提供 toDataURL 方法用于导出图片

每次调用函数都会生成不同的随机图案和颜色组合，图案会自动居中显示，确保在不同宽高比下都有良好的视觉效果。卡牌背面和装饰性图案风格更加复杂和美观，适合用于更专业的占位图场景。