【html2img/pdf 纯！纯！python将html保存为图片/pdf！！效果非常的棒！】

素材 a.png
html card.html

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

python 复制代码

import plutoprint
from plutoprint import PageSize
from IPython.display import Image as display_image

size = 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】