使用Python将div转换为图片并作为附件发送到Slack的方案咨询

这个需求完全可以实现，核心分为「HTML片段渲染生成本地图片」、「将图片发送到Slack」两个步骤，具体实现方案如下：

1. HTML渲染为本地图片 #

推荐两种成熟方案，可根据你的环境选择：

方案一：Playwright（优先推荐） #

无需复杂的依赖适配，渲染效果和真实浏览器完全一致，适合需要还原复杂样式的场景。
首先安装依赖：
执行命令pip install playwright安装Python库，再执行playwright install chromium安装内置浏览器。
渲染截图代码示例：

from playwright.sync_api import sync_playwright

# 你的目标div代码
target_div = """
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-duyuru" id="inputGroup-sizing-default" style="font-weight: 500;">Duyuru Tipi:</span>
  </div>
  <input type="text" class="form-duyuru" name="dolusturulmatarihi" id="dolusturulmatarihi" aria-label="Default" aria-describedby="inputGroup-sizing-default">
</div>
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-duyuru" style="font-weight: 500;">Açıklama:</span>
      </div>
      <textarea class="form-duyuru" name="daciklama" id="daciklama" aria-label="With textarea">XX:XX </textarea>
    </div>
"""
# 组装完整HTML，可引入原项目的CSS保证样式一致
full_html = f"""
<html>
<head>
    <!-- 在这里引入你原页面使用的CSS样式，避免渲染后样式错乱 -->
</head>
<body>
{target_div}
</body>
</html>
"""

# 启动无头浏览器截图
with sync_playwright() as p:
    browser = p.chromium.launch(headless=True)
    page = browser.new_page(viewport={"width": 800, "height": 600})
    page.set_content(full_html)
    # 直接对页面内容截图，也可以指定定位到对应div截图
    page.screenshot(path="rendered_div.png")
    browser.close()

方案二：imgkit（轻量方案） #

适合简单HTML渲染，需要先在你的运行环境安装wkhtmltopdf工具，再执行pip install imgkit安装Python库，直接调用imgkit的from_string方法即可将HTML转为图片。

2. 发送图片到Slack #

两种方式可以匹配你现有的发送逻辑：

方式一：沿用现有Webhook逻辑 #

将生成的图片上传到你的项目公网可访问的静态资源目录，拿到图片的公网访问链接后，直接替换你现有slack_msg里的image_url字段值为该链接，执行原有requests.post请求即可，图片会自动展示在Slack消息的附件区域。
原有代码调整示例：

import json
import requests

web_hook_url = 'XXXX'
slack_msg = {
"attachments": [
    {
        "fallback": "test1.",
        "color": "#f5b400",
        "pretext": "test2",
        "author_name": "TEST ALARMI2",
        "author_link": "https://XX/",
        "author_icon": "http://flickr.com/icons/bobby.jpg",
        "title": "test4",
        "title_link": "https://XX/",
        "text": "test5",
        "fields": [
            {
                "title": "Priority",
                "value": "High",
            }
        ],
        # 替换为你的图片公网链接
        "image_url": "你的图片公网访问地址",
        "thumb_url": "http://example.com/path/to/thumb.png",
        "footer": "Techops",
        "footer_icon": "https://platform.slack-edge.com/img/default_application_icon.png",
    }
]
}
requests.post(web_hook_url,data=json.dumps(slack_msg))

方式二：直接上传本地图片作为附件 #

如果不想将图片暴露在公网，可使用Slack官方提供的文件上传接口，直接上传本地图片发送，需要先申请Slack应用的上传权限和令牌，示例代码：

import requests

# 替换为你的Slack应用令牌、目标频道ID
SLACK_TOKEN = "你的Slack应用令牌"
TARGET_CHANNEL = "目标频道ID"

with open("rendered_div.png", "rb") as img_file:
    requests.post(
        "Slack文件上传接口地址",
        headers={"Authorization": f"Bearer {SLACK_TOKEN}"},
        files={"file": img_file},
        data={"channels": TARGET_CHANNEL, "initial_comment": "附带的文本消息内容"}
    )

• 渲染HTML时如果样式不符合预期，需确认你已将原页面用到的所有CSS样式引入到渲染用的完整HTML中，避免样式丢失。
• 使用Webhook方式发送时，需保证图片的公网链接可正常被外部访问，Slack才能正常加载展示图片。

内容的提问来源于stack exchange，提问作者tcblue