- 素材 a.png
- html card.html
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>固定样式卡片</title><style>/* 基础样式和页面居中 */body {font-family: "微软雅黑", "PingFang SC", "Helvetica Neue", sans-serif;background-color: #f5f5f5;margin: 0;display: flex;justify-content: center;align-items: center;min-height: 100vh;}/* 卡片容器 - 固定尺寸 */.card {width: 1200px;height: 675px;display: flex;background-color: #fff;border-radius: 16px;box-shadow: 0 8px M20px rgba(0, 0, 0, 0.1);overflow: hidden;}/* 卡片图片 - 固定尺寸 */.card img {width: 600px;height: 675px;object-fit: cover;border-radius: 16px;}/* 卡片内容区域 - 固定尺寸 */.card-content {width: 600px;height: 675px;padding: 40px;display: flex;flex-direction: column;justify-content: center;text-align: left;font-size: 18px;box-sizing: border-box;}.card-content ol {padding-left: 25px;margin: 0;}.card-content li {margin-bottom: 20px;line-height: 1.7;}/* 移除最后一个列表项的下边距,使布局更整洁 */.card-content li:last-child {margin-bottom: 0;}.card-content strong {color: #333;}</style>
</head><body><div class="card"><img src="a.png" alt="示例图片"><div class="card-content"><ol><li><strong>多场景融合构图</strong>:将骑行、绿植、建筑元素巧妙结合,通过低角度与仰视视角强化空间层次,实现“人-景-境”三位一体的叙事感。</li><li><strong>动态姿态自然捕捉</strong>:坐车轻扶、半蹲触叶、倚栏侧身等姿势贴近生活场景,配合微微前倾与肢体放松,真实传递随性松弛的氛围。</li><li><strong>前景框架增强沉浸感</strong>:利用自行车轮、绿植枝叶作为前景虚化框,结合三分法构图,提升画面纵深与视觉引导力。</li><li><strong>光线与参数精准匹配</strong>:根据拍摄角度灵活调整光圈与快门(f/2.8–f/4,1/200s–1/320s),兼顾虚化效果与动作清晰度,实现专业级光影控制。</li><li><strong>情绪与环境高度协同</strong>:表情与肢体语言紧扣场景主题(如骑行的自由、绿植的温柔、建筑的沉思),实现“环境即情绪”的视觉表达。</li></ol></div></div></body></html>
- python
pip install plutoprint
import plutoprint
from plutoprint import PageSize
from IPython.display import Image as display_imagesize = PageSize(16 * 64, 9 * 64)
book = plutoprint.Book(size=size, media=plutoprint.MEDIA_TYPE_SCREEN)with open("card.html", "r") as f:html_text = f.read()
book.load_html(html_text,user_style="body { text-align: center; font-family: 'Noto Serif SC';}",
)
book.write_to_png("card.png", int(book.get_document_width() * 2), int(book.get_document_height() * 2)
)display_image("card.png")
-
结果
-
官方仓库
【https://github.com/plutoprint/plutoprint】
另一个方案js的,也非常的不错【https://github.com/zumerlab/snapdom】