Change HTML with CSS inline to use data Url

In want to, on the fly, change an HTML similar to this:

<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>

To (urls are cut):

<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>

Now I use this code:

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;

}

But my code ignores urls in CSS.

Is it possible to make this change simple? I tried with some css-libraries, but I can't find a simple form...

edited Nov 15 '18 at 9:16

asked Nov 15 '18 at 8:32

Victor Sanchez

318423

you are just accessingimg with your c# code. You mean you need css background image with HtmlAgilityPack?

– Znaneswar
Nov 15 '18 at 9:38

I need change all urls in style. Now I only change urls in IMG tag. This is only a sample.

– Victor Sanchez
Nov 15 '18 at 10:03

add a comment |

In want to, on the fly, change an HTML similar to this:

<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>

To (urls are cut):

<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>

Now I use this code:

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;

}

But my code ignores urls in CSS.

Is it possible to make this change simple? I tried with some css-libraries, but I can't find a simple form...

edited Nov 15 '18 at 9:16

asked Nov 15 '18 at 8:32

Victor Sanchez

318423

you are just accessingimg with your c# code. You mean you need css background image with HtmlAgilityPack?

– Znaneswar
Nov 15 '18 at 9:38

I need change all urls in style. Now I only change urls in IMG tag. This is only a sample.

– Victor Sanchez
Nov 15 '18 at 10:03

add a comment |

In want to, on the fly, change an HTML similar to this:

<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>

To (urls are cut):

<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>

Now I use this code:

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;

}

But my code ignores urls in CSS.

Is it possible to make this change simple? I tried with some css-libraries, but I can't find a simple form...

edited Nov 15 '18 at 9:16

asked Nov 15 '18 at 8:32

Victor Sanchez

318423

In want to, on the fly, change an HTML similar to this:

<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>

To (urls are cut):

<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>

Now I use this code:

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;

}

But my code ignores urls in CSS.

Is it possible to make this change simple? I tried with some css-libraries, but I can't find a simple form...

c# html css html-agility-pack

edited Nov 15 '18 at 9:16

asked Nov 15 '18 at 8:32

Victor Sanchez

318423

edited Nov 15 '18 at 9:16

asked Nov 15 '18 at 8:32

Victor Sanchez

318423

edited Nov 15 '18 at 9:16

asked Nov 15 '18 at 8:32

Victor Sanchez

318423

asked Nov 15 '18 at 8:32

Victor Sanchez

318423

asked Nov 15 '18 at 8:32

Victor Sanchez

318423

you are just accessingimg with your c# code. You mean you need css background image with HtmlAgilityPack?

– Znaneswar
Nov 15 '18 at 9:38

I need change all urls in style. Now I only change urls in IMG tag. This is only a sample.

– Victor Sanchez
Nov 15 '18 at 10:03

add a comment |

you are just accessingimg with your c# code. You mean you need css background image with HtmlAgilityPack?

– Znaneswar
Nov 15 '18 at 9:38

I need change all urls in style. Now I only change urls in IMG tag. This is only a sample.

– Victor Sanchez
Nov 15 '18 at 10:03

you are just accessingimg with your c# code. You mean you need css background image with HtmlAgilityPack?

– Znaneswar
Nov 15 '18 at 9:38

I need change all urls in style. Now I only change urls in IMG tag. This is only a sample.

– Victor Sanchez
Nov 15 '18 at 10:03

add a comment |

1 Answer
1

active

oldest

votes

you can't do that with HtmlAgilityPack but Try 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;

}

answered Nov 19 '18 at 12:02

ewwink

12k22339

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53315231%2fchange-html-with-css-inline-to-use-data-url%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

you can't do that with HtmlAgilityPack but Try 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;

}

answered Nov 19 '18 at 12:02

ewwink

12k22339

add a comment |

you can't do that with HtmlAgilityPack but Try 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;

}

answered Nov 19 '18 at 12:02

ewwink

12k22339

add a comment |

you can't do that with HtmlAgilityPack but Try 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;

}

answered Nov 19 '18 at 12:02

ewwink

12k22339

you can't do that with HtmlAgilityPack but Try 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;

}

answered Nov 19 '18 at 12:02

ewwink

12k22339

answered Nov 19 '18 at 12:02

ewwink

12k22339

answered Nov 19 '18 at 12:02

ewwink

12k22339

answered Nov 19 '18 at 12:02

ewwink

12k22339

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Vfrdtyky