Python解析CSS提取图片与TTF文件并生成Base64 URL的实现问询

嘿，我来帮你搞定这个需求！要实现从CSS里提取图片和TTF文件并转成Base64 URL，咱们可以分成解析CSS提取资源路径和生成Base64 Data URI两个核心步骤来做，下面给你详细拆解：

一、解析CSS提取目标资源路径 #

方案1：正则表达式（快速入门） #

如果你的CSS结构不算特别复杂，正则表达式是最快捷的方式。我们可以匹配CSS中url()函数里的内容，再筛选出.png/.jpg/.jpeg/.gif/.ttf这类目标文件。

示例代码：

import re

def extract_css_resources(css_content):
    # 匹配url()中的资源路径，兼容带引号/不带引号的情况
    url_pattern = re.compile(r'url\(\s*["\']?([^"\')]+)["\']?\s*\)', re.IGNORECASE)
    all_urls = url_pattern.findall(css_content)
    
    # 筛选出图片和TTF文件
    target_extensions = ('.png', '.jpg', '.jpeg', '.gif', '.ttf')
    resource_paths = [url for url in all_urls if url.lower().endswith(target_extensions)]
    
    return resource_paths

方案2：专业CSS解析库（严谨可靠） #

如果要处理复杂的CSS语法（比如嵌套规则、注释、特殊字符转义等），用专业库会更稳妥，比如tinycss2或者cssutils。这里以tinycss2为例：

首先安装依赖：

pip install tinycss2

示例代码：

import tinycss2

def extract_css_resources_with_parser(css_content):
    # 解析CSS内容，跳过注释
    rules = tinycss2.parse_stylesheet(css_content, skip_comments=True)
    resource_paths = []
    target_extensions = ('.png', '.jpg', '.jpeg', '.gif', '.ttf')
    
    for rule in rules:
        # 只处理样式规则（忽略@media等嵌套规则，如需处理可扩展）
        if rule.type == 'qualified-rule':
            for decl in rule.declarations:
                if decl.type == 'declaration':
                    # 遍历声明中的所有token，找到url类型的token
                    for token in decl.value:
                        if token.type == 'url':
                            url = token.value
                            if url.lower().endswith(target_extensions):
                                resource_paths.append(url)
    return resource_paths

二、生成Base64 Data URI #

你已经掌握了Base64生成方法，这里补充完整的转换逻辑，包括处理相对路径和生成正确的Data URI格式：

import base64
import os

def file_to_base64_uri(file_path):
    # 获取文件扩展名，匹配对应的MIME类型
    ext = os.path.splitext(file_path)[1].lower()
    mime_map = {
        '.png': 'image/png',
        '.jpg': 'image/jpeg',
        '.jpeg': 'image/jpeg',
        '.gif': 'image/gif',
        '.ttf': 'font/ttf'
    }
    mime_type = mime_map.get(ext, 'application/octet-stream')
    
    # 读取文件并编码为Base64
    with open(file_path, 'rb') as f:
        base64_data = base64.b64encode(f.read()).decode('utf-8')
    
    return f'data:{mime_type};base64,{base64_data}'

三、整合完整流程 #

把上面的步骤整合起来，实现从CSS中提取资源、转换Base64、替换原URL的完整功能：

def replace_css_resources_with_base64(css_content, css_dir):
    # 提取资源路径（可切换为专业解析函数）
    resource_paths = extract_css_resources(css_content)
    
    for url in resource_paths:
        # 处理相对路径：拼接CSS文件所在目录
        abs_file_path = os.path.join(css_dir, url)
        if os.path.exists(abs_file_path):
            base64_uri = file_to_base64_uri(abs_file_path)
            # 替换CSS中的原URL（注意匹配带/不带引号的情况）
            css_content = re.sub(
                rf'url\(\s*["\']?{re.escape(url)}["\']?\s*\)',
                f'url("{base64_uri}")',
                css_content
            )
    return css_content

# 使用示例：假设CSS文件在当前目录下
if __name__ == '__main__':
    css_file_path = 'styles.css'
    with open(css_file_path, 'r', encoding='utf-8') as f:
        css_content = f.read()
    
    css_dir = os.path.dirname(css_file_path)
    processed_css = replace_css_resources_with_base64(css_content, css_dir)
    
    # 保存处理后的CSS
    with open('processed_styles.css', 'w', encoding='utf-8') as f:
        f.write(processed_css)

注意事项 #

• 相对路径处理：要注意CSS文件所在的目录，把资源的相对路径转为绝对路径才能正确读取文件。
• 远程资源：如果CSS中包含远程URL，需要先通过requests等库下载到本地再转换Base64。
• 性能优化：如果CSS或资源文件很大，可以考虑分批处理，避免内存占用过高。

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