Python解码base64字符串保存PNG文件损坏如何解决

你当前所有操作的核心逻辑错误：把HTML源码的base64编码直接解码后存为.png后缀文件，永远不可能得到可正常打开的PNG图片。

• 你做base64编码的源对象是包含JavaScript的HTML文本，解码后得到的仍然是HTML源码，不是PNG格式的二进制图像数据。不管你给文件加什么后缀，它本质都是HTML文件，图片查看器自然无法识别。
• 浏览器打开HTML能看到canvas绘制的图形，是因为浏览器内核执行了页面里的JS代码、完成了画布渲染流程。base64编解码只是纯文本/二进制的格式转换操作，不会执行JS，也不会自动把渲染后的画布内容转换成图片数据。
• 之前用imgkit只导出了背景层，是因为imgkit依赖的wkhtmltoimage没有完整的浏览器渲染环境，默认不会等待JS执行完成，自然捕获不到canvas上后续绘制的椭圆元素。

你需要先在完整的浏览器环境中加载HTML，等待JS执行完毕、canvas完成全部绘制后，调用canvas原生接口导出PNG格式的base64数据，这部分数据解码后才是合法的PNG文件。

两种可落地的实现方案 #

方案1：前端直接导出（可修改HTML源码时用） #

在现有HTML的所有canvas绘制逻辑末尾，加一行导出代码，拿到的就是PNG对应的base64字符串：

// 放在所有canvas绘制代码的最后
const pngBase64 = canvas.toDataURL('image/png').replace('data:image/png;base64,', '');
// 此处拿到的pngBase64就是纯PNG内容的base64，直接解码存文件即可正常打开

方案2：后端无头浏览器渲染（自动化业务场景用） #

用Playwright/Puppeteer这类搭载完整Chromium内核的工具加载HTML，等待渲染完成后导出canvas内容，不需要修改前端源码。以Python版Playwright为例：

from playwright.sync_api import sync_playwright
import base64

# 填入你的完整HTML源码
html_source = """你的完整HTML代码"""

with sync_playwright() as p:
    browser = p.chromium.launch()
    page = browser.new_page(viewport={"width": 4096, "height": 4096})
    page.set_content(html_source)
    page.wait_for_selector("#myCanvas")
    # 可根据实际绘制耗时加固定等待，确保椭圆等元素全部绘制完成
    page.wait_for_timeout(300)
    # 从canvas导出PNG格式的base64
    png_base64 = page.evaluate("""() => {
        const cv = document.getElementById('myCanvas');
        return cv.toDataURL('image/png').split(',')[1];
    }""")
    # 解码写入文件
    with open("turquoise egg.png", "wb") as f:
        f.write(base64.b64decode(png_base64))
    browser.close()

如果canvas绘制包含异步加载资源、动画逻辑，可对应调整等待条件，确保所有绘制操作完成后再导出，就不会出现图层缺失的问题。

你写的三个base64解码函数本身没有语法错误，问题出在传入的源数据从一开始就不是PNG数据：你编码的是HTML文本，解码输出的自然还是HTML文本，单纯修改文件后缀不可能改变文件的实际格式。

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