imgkit(wkhtml2image)转换嵌入Twitter组件的HTML为图片时JS不加载问题

imgkit底层基于wkhtmltopdf实现，该工具的内置浏览器内核版本老旧，对现代异步JavaScript、跨域第三方资源的加载支持不完善。Twitter官方的widgets.js属于异步动态渲染脚本，无法在wkhtmltopdf环境中完成完整的渲染流程，因此转换后只能拿到未替换的原始blockquote标签截图。

方案1：替换为无头浏览器内核工具（推荐，兼容性最好） #

放弃imgkit，改用调用完整现代浏览器内核的转换库，比如playwright、selenium，这类工具可以完美支持第三方JS的加载和渲染。

操作步骤 #

1. 安装依赖：

pip install playwright
playwright install chromium

2. 实现转换代码：

from playwright.sync_api import sync_playwright
import os

def cnv2image():
    # 生成本地HTML文件的绝对路径
    html_path = os.path.abspath("tweet_embed.html")
    with sync_playwright() as p:
        # 启动无头Chromium浏览器
        browser = p.chromium.launch(headless=True)
        page = browser.new_page()
        # 加载本地HTML文件
        page.goto(f"file://{html_path}")
        # 等待Twitter推文完成渲染，最多等待15秒
        page.wait_for_selector(".twitter-tweet-rendered", timeout=15000)
        # 截图保存，full_page参数保证完整截取长推文
        page.screenshot(path="result.jpg", full_page=True)
        browser.close()

方案2：调整imgkit参数适配（适配性一般，可尝试） #

如果必须使用imgkit，可以通过调整配置参数提升JS加载支持：

1. 修改Python的options配置，新增允许外部资源加载、不限制慢脚本执行的参数：

def cnv2image():
    options = {
        "--enable-local-file-access": None,
        "--enable-javascript": None,
        "--javascript-delay": 15000,
        "--debug-javascript": None,
        "--no-stop-slow-scripts": None,
        "--enable-external-links": None,
        "--load-error-handling": "ignore"
    }
    imgkit.from_file("tweet_embed.html", "result.jpg", options=options)

2. 修改HTML中的script标签，去掉async属性，改为同步加载脚本：

<script charset="utf-8" src="https://platform.twitter.com/widgets.js"></script>

方案3：预渲染静态HTML后转换 #

调用Twitter官方OEmbed接口提前获取渲染完成的静态HTML代码，写入本地文件后再用imgkit转换，无需依赖前端JS加载。

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