有没有一个python库可以将html/css（字符串）转换成png

问题描述 投票：0回答：1

我制作了一个活动门票系统，我希望将 html 字符串（门票设计）转换为 png，以便稍后通过电子邮件发送出去。我的问题是我找不到正确的方法将我的 html 字符串转换为 python 上的 png。我用基本的 html 让它工作一次，但是当添加其余的 css 和其他 html 时，它不想渲染。

这是带有 html 票证的 python 代码，我基本上对任何想法持开放态度。蒂

import smtplib, ssl
from email.mime.multipart import MIMEMultipart
from email.mime.text import MIMEText
import gspread
from google.oauth2.service_account import Credentials
import imgkit
from PIL import Image
from io import BytesIO

#connect to google spreadsheet
credentials = Credentials.from_service_account_file('e.json')
scoped_credentials = credentials.with_scopes(['https://www.googleapis.com/auth/spreadsheets'])
spreadsheet_id = '123456abcdefg'
gc = gspread.authorize(scoped_credentials)
worksheet = gc.open_by_key(spreadsheet_id).sheet1

#`replace below with your email address and password
email_from = '[email protected]'
password = '1234'
email_to = '[email protected]'

#html code form email sending
html_send_email = """
            <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>School Dance Ticket</title>
    <link href='https://fonts.googleapis.com/css?family=Open Sans' rel='stylesheet'>
    <style>
        .ticket-box {
    width: 500px;
    height: 860px;
    padding: 20px;
    margin: 20px auto;
    background-color: #000000;
    box-sizing: border-box;
    position: relative;
    border-radius: 10px;
}

html, body {
   overflow-x: hidden; 
}

.information-box {
    width: 450px;
    height: 675px;
    padding-top: 10px;
    padding-left: 10px;
    margin-right: 10px;
    align-self: center;
    background-color: #ffffff;
    border-radius: 15px;
    border: 10px
}   

.both-id-name {
    display: flex;
    justify-content: space-between;
}

.full-grade-email {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
}

.scan-code-uuid-display-div {
    display: flex;
    justify-content: space-between;
}

.location {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
}

.both-time-date {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    margin-right: 10px;
}

/*Location*/

.location-label {
    align-self: left;
    font-family: 'Open Sans';
    font-size: 15px;
}

.location-school-label {
    align-self: left;
    flex-direction: column;
    font-family: 'Open Sans';
    font-size: 18px;
    font-weight: bolder;
}

.location-school-stag-label {
    align-self: left;
    flex-direction: column;
    font-family: 'Open Sans';
    font-size: 14px;
    font-style: italic;
}

/* Time */

.time-div {
    flex-direction: column;
    display: flex;
}

.time-label {
    align-self: left;
    font-family: 'Open Sans';
    font-size: 15px;
}

.time-input {
    align-self: left;
    flex-direction: column;
    font-family: 'Open Sans';
    font-size: 18px;
    font-weight: bolder;
}

/* Date */

.date-div {
    flex-direction: column;
    display: flex;
}

.date-label {
    text-align: right;
    align-self: right;
    font-family: 'Open Sans';
    font-size: 15px;
}

.date-input {
    align-self: right;
    flex-direction: column;
    font-family: 'Open Sans';
    font-size: 18px;
    font-weight: bolder;
}

.date-label label {
    align-self: right;
    font-family: 'Open Sans';
}

/* Full Name Info*/

.full-name-div {
    display: flex;
    flex-direction: column;
}

.full-name-label label {
    align-self: left;
    font-family: 'Open Sans';
    font-size: 15px;
}

.full-name-label {
    font-family: 'Open Sans';
    font-size: 15px;
    text-align: left;
}

.full-name-input {
    align-self: left;
    flex-direction: column;
    font-family: 'Open Sans';
    font-size: 18px;
    font-weight: bolder;
}

/*ID Number*/

.id-number-div {
    flex-direction: column;
    display: flex;
}

.id-number-div label {
    margin-right: 10px;
}

.id-number-label {
    font-family: 'Open Sans';
    font-size: 15px;
    text-align: right;
}

.id-number-input {
    font-family: 'Open Sans';
    font-size: 18px;
    font-weight: bolder;
    text-align: right;
}

/*Grade Level*/

.grade-level-div {
    display: flex;
    flex-direction: column;
}

.grade-level-label label {
    align-self: left;
    font-family: 'Open Sans';
    font-size: 15px;
}

.grade-level-label {
    font-family: 'Open Sans';
    font-size: 15px;
    text-align: left;
}

.grade-level-input {
    align-self: left;
    flex-direction: column;
    font-family: 'Open Sans';
    font-size: 18px;
    font-weight: bolder;
}

/* Email Address*/

.email-address-div {
    flex-direction: column;
    display: flex;
}

.email-address-div label {
    margin-right: 10px;
}

.email-address-label {
    font-family: 'Open Sans';
    font-size: 15px;
    text-align: right;
}

.email-address-input {
    font-family: 'Open Sans';
    font-size: 18px;
    font-weight: bolder;
    text-align: right;
}

/* Other */

.event-name-label {
    display: flex;
    text-align: center;
    flex-direction: column;
    font-size: 40px;
    font-family:Arial, Helvetica, sans-serif;
    font-weight: bold;
    color:#000000;
    margin-top: 5px;
    margin-bottom: 15px;
}

.scannable-box {
    width: 450px;
    height: 110px;
    padding-top: 10px;
    padding-left: 10px;
    margin-right: 10px;
    margin-top: 15px;
    align-self: center;
    background-color: #ffffff;
    border-radius: 15px;
    border: 10px
}   

.scan-code-uuid-display {
    font-family: 'Open Sans';
    font-size: 15px;
    text-align: center;
    margin-left: 78px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
}

.scan-code-image {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 95%;
}
    </style>

</head> 

<body>
    <div class="ticket-box">
        <div class="information-box">
            <div>
                <h1 class="event-name-label">Ticket</h1>
            </div>
            
            <div class="location">
                <label class="location-label">Location:</label>
                <label class="location-school-label">A Cool Event</label>
                <label class="location-school-stag-label">1234 Cool Drive</label>
            </div>

            <div class="both-time-date">
                <div class="time-div">
                    <label class="time-label">Time:</label>
                    <label class="time-input">6:00 PM - 9:00 PM</label>
                </div>

                <div class="date-div">
                    <label class="date-label">Date:</label>
                    <label class="date-input">October 20, 2023</label>
                </div>
            </div>

            <div class="both-id-name">
                <div class="full-name-div">
                    <label class="full-name-label">Full Name:</label>
                    <label class="full-name-input">{{FULL_NAME}}</label>
                </div>
    
                <div class="id-number-div">
                    <label class="id-number-label">School ID Number:</label>
                    <label class="id-number-input">{{ID_NUMBER}}</label>
                </div>
            </div>
            <div class="full-grade-email">
                <div class="grade-level-div">
                    <label class="grade-level-label">Grade Level:</label>
                    <label class="grade-level-input">{{GRADE_LEVEL}}</label>
                </div>
    
                <div class="email-address-div">
                    <label class="email-address-label">Email Address:</label>
                    <label class="email-address-input">{{EMAIL}}</label>
                </div>
            </div>
        </div>
        <div class="scannable-box">
            <div class="scan-code-uuid-display-div">
                <label class="scan-code-uuid-display">{{UUID}}</label>
            </div>
            <img class="scan-code-image" src="scan-code-replaced-a-lot.png">
        </div>
    </div>
</body>
"""

# send email message
email_message = MIMEMultipart()
email_message.attach(MIMEText(html_send_email, "html"))

# Finally send one email 
# Convert it as a string
email_string = email_message.as_string()

# Connect to the Gmail SMTP server and Send Email
context = ssl.create_default_context()
with smtplib.SMTP_SSL("smtp.gmail.com", 465, context=context) as server:
    server.login(email_from, password)
    server.sendmail(email_from, email_to, email_string)

我基本上尝试了许多声称可以将 html 字符串转换为 png 的 python 库（例如 Html2Image、wkhtmltoimage 等库），但最终总是在库本身中出现语法错误。我尝试了很多，但现在我被难住了。

python html png wkhtmltoimage
1个回答
0
投票

您可以使用imgkit 首先你需要安装imgkit >>pip 安装 imgkit

这是Python代码

导入imgkit

html =“body {背景颜色：浅蓝色;}

你好，世界！

” 输出路径=“输出.png”

选项={ “格式”：“png”， “宽度”：600， “高度”：400， }

imgkit.from_string（html，output_path，选项=选项）

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.