使用 CSS 内联更改 HTML 以使用数据 Url答案

【问题标题】：Change HTML with CSS inline to use data Url使用 CSS 内联更改 HTML 以使用数据 Url
【发布时间】：2019-12-27 07:30:08
【问题描述】：

想要即时更改类似于以下内容的 HTML：

<html><head><style>
body { 
    background: transparent url(http://example.com/image.gif) no-repeat right bottom;
}
</style><head>
<body>
    <img src="http://example.com/image2.gif"/>
</body>
</html>

到（网址被剪掉）：

<html><head><style>
body { 
    background: transparent url(data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/...) no-repeat right bottom;
}
</style>
<head>
<body>
    <img src="data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/...."/>
</body>
</html>

现在我使用这个代码：

private string EmbebedImages(string strHtml)
{
    var doc = new HtmlAgilityPack.HtmlDocument();
    doc.LoadHtml(strHtml);

    foreach (var imgNode in doc.DocumentNode.SelectNodes("//img[@src]"))
    {
    string url = imgNode.Attributes["src"].Value;
    if (url.StartsWith("http"))
    {
        using (var webClient = new WebClient())
        {
        var imageAsByteArray = webClient.DownloadData(url);
        string mimeType = MimeMapping.GetMimeMapping(url);

        imgNode.Attributes["src"].Value = "data:" + mimeType + ";base64," +
            Convert.ToBase64String(imageAsByteArray);
        }
    }
    }

    return doc.DocumentNode.OuterHtml;
}

但我的代码忽略了 CSS 中的 url。

是否可以使这种更改变得简单？我尝试了一些 css 库，但我找不到简单的表单...

【问题讨论】：

您只是在使用您的 c# 代码访问img。你的意思是你需要带有 HtmlAgilityPack 的 css 背景图片？
我需要更改所有 url 的样式。现在我只更改 IMG 标签中的网址。这只是一个示例。

标签： c# html css html-agility-pack

【解决方案1】：

你不能用 HtmlAgilityPack 做到这一点，但试试Regex

using System.Text.RegularExpressions;

private string EmbebedImages(string strHtml) {
    var htmlString = .......load html string....;
    string currentURL;

    var images_url = Regex.Matches(htmlString, @"(?:https?:\/\/.*?\.(gif|png|jpg|jpeg))");
    foreach(var url in images_url) {
        currentURL = url.ToString();
        using(var webClient = new WebClient()) {
            var imageAsByteArray = webClient.DownloadData(currentURL);
            string mimeType = MimeMapping.GetMimeMapping(currentURL);
            string dataURL = "data:" + mimeType + ";base64," + Convert.ToBase64String(imageAsByteArray);
            htmlString = htmlString.Replace(currentURL, dataURL);
        }
    }

    return htmlString;
}

【讨论】：

【解决方案2】：

虽然这不适用于 OP 的情况，但如果在 Python 中想要将 URL 转换为 CSS 中的数据 URI，我是这样做的：

import requests
import re
import base64

def url_to_base64(url, memo=None):
    if memo is None:
        memo = {}
    if url in memo:
        return memo[url]
    res = requests.get(url)
    mime_type = res.headers['content-type']
    base64_data = base64.b64encode(res.content).decode('utf-8')
    data_url = "data:{};base64,{}".format(mime_type, base64_data)
    memo[url] = data_url
    return data_url


def embed_urls(html, memo=None):
    if memo is None:
        memo = {}
    pattern = re.compile(r"url\('(https?://.*?)'\)")
    urls = set(re.findall(pattern, html))
    for url in urls:
        base64_data = url_to_base64(url, memo)
        html = html.replace(url, base64_data)
    return html

【讨论】：