# 大小王对称渲染

## 背景

当前大小王在有素材图片时，将整张图居中适配绘制在躯体区域，无对称处理。需要改为：上半区显示原图，下半区显示原图的垂直镜像，实现类似 JQK 人像的对称效果。

## 需求

- 上传的素材图片作为**上半部分**的源图
- 躯体区域纵向平分：上半区绘制原图（居中适配），下半区绘制垂直翻转后的同一张图
- 角标 JOKER + BIG/SMALL 不变
- 无素材时回退到白字 "JOKER" 居中（不变）

## 修改范围

| 文件 | 函数 |
|------|------|
| `frontend/src/utils/cardRenderer.js` | `drawJokerBody()` |
| `backend/apps/exports/utils.py` | `draw_joker()` |

## 前端实现 (Canvas2D)

在 `drawJokerBody` 中，当有素材图片时：

```js
// 躯体区域上下平分
const halfH = bodyH / 2

// 上半区：原图居中适配
const fit = fitSize(imgW, imgH, bodyW, halfH)
ctx.drawImage(img, bodyX + (bodyW - fit.w) / 2, bodyY + (halfH - fit.h) / 2, fit.w, fit.h)

// 下半区：垂直翻转后居中适配
ctx.save()
ctx.translate(0, bodyY + halfH)         // 移动到下半区中线
ctx.scale(1, -1)                         // 垂直翻转
ctx.drawImage(img, bodyX + (bodyW - fit.w) / 2, -(halfH - fit.h) / 2, fit.w, fit.h)
ctx.restore()
```

## 后端实现 (PIL)

在 `draw_joker` 中，当有素材图片时：

```python
half_h = body_h // 2

# 上半区：原图居中适配
img.thumbnail((body_w, half_h), Image.LANCZOS)
x1 = body_x + (body_w - img.width) // 2
y1 = body_y + (half_h - img.height) // 2
canvas.paste(img, (x1, y1), img)

# 下半区：垂直翻转后居中适配
img_flipped = img.transpose(Image.FLIP_TOP_BOTTOM)
y2 = body_y + half_h + (half_h - img_flipped.height) // 2
canvas.paste(img_flipped, (x1, y2), img_flipped)
```

Note: `thumbnail` 是原地修改，所以上半区粘贴完成后需要重新加载原图再做翻转，或者先复制一份。

修正：
```python
img_copy = img.copy()
img_copy.thumbnail((body_w, half_h), Image.LANCZOS)
# 上半区粘贴 img_copy
img_flipped = img_copy.transpose(Image.FLIP_TOP_BOTTOM)
# 下半区粘贴 img_flipped
```

## 注意事项

- 前端当前使用 `Math.max` (fill) 适配策略，改为对称后每个半区内图片尺寸一致
- 后端当前使用 `thumbnail` (contain) 适配，保持一致即可
- 躯体 padding 前端 18%/22%，后端 15%/20%，各自保持不变