个人中心
gpt4 book ai didi

c# - 如何将 css 代码引用到 HtmlToImageConverter

转载 作者：行者123 更新时间：2023-11-28 19:29:40 25 4
gpt4 key购买 nike

对于我正在创建的 Discord Bot，我需要通过“配置文件”命令生成用户配置文件。 HTML 显示正常，但未使用我的任何 CSS 样式。如何获取包含我的 CSS 样式的 html 字符串？

我对 HTML 和 CSS 没有多少经验(这是别人为我制作的)，但我相信 href 是 CSS 的引用位置。我已经尝试插入文档的名称 stylesheet.css 但没有成功(也许 HTML 找不到它)。现在，它由 {0} 表示，这是我的格式化字符串中的第一个对象。 {0} 是它上面的 css 字符串变量。

这些字符串中的每个\n 都是通常的 Enter 击键，这只是为了让机器人可以读取它。我在下面包含了原始的 HTML 和 CSS 文件。

 [Command("profile")] //Generates a user's profile using HTML / CSS
        public async Task Profile()
        {
            var account = UserAccounts.GetAccount(Context.User);

            string css = "@font-face {\n  font-family: 'Raleway';\n  src: URL('Raleway-Regular.ttf') format('truetype');\n}\n\nhtml " +
                "{\n    \n    font-family: 'Raleway', sans-serif;\n    \n}\n\n#probar {\n    \n    height:24px;\n    width:50%;\n    " +
                "background-color: skyblue;\n    border-radius: 30px;\n    \n}\n\n#probox {\n    \n    background-color: lightblue;\n    " +
                "width: 100%;\n    margin: auto;\n    border-radius: 30px;\n    \n}\n\n#window {\n    \n    width: 300px;\n    " +
                "background-color: lightgray;\n    margin: 0;\n/*\n    background-image: url(dafef97cb397e61f4c47ef27523b092c.jpg);\n    " +
                "background-size:cover;\n    background-repeat: no-repeat;\n*/\n    \n}\n\n#header {\n    \n    width: 90%;\n    margin: auto;\n    " +
                "padding-top: 10px;\n    \n}\n\n#pfp {\n\n    height: 150px;\n    width: 150px;\n    border-radius: 30px;\n    margin: auto;\n    " +
                "border: gray solid 1px;\n    \n}\n\n#name {\n    \n    text-align: center;\n    \n}\n\n#content{\n    \n    width: 90%;\n    margin: auto;\n    " +
                "padding-bottom: 10px;\n    color: black;\n       \n}\n\n.info {\n    \n    padding-bottom: 5px;\n    font-size: 12px;\n    \n}\n" +
                "\n#row {\n    \n    display: flex;\n    color: black;\n    \n}\n\n#level {\n    \n    margin: auto;\n    \n}\n\n#yes {\n    \n    margin: 0;\n    text-align: center;\n    \n}" +
                "\n\n#no {\n\n    font-size: 40px;\n    margin: 0;\n    text-align: center;\n    border: solid black 1px;\n\n}\n\n#infolist {\n    \n    text-align: center;\n    margin-top: 15px;\n    \n}" +
                "\n\n#statlist {\n    \n    text-align: right;\n    margin-top: 15px;\n    \n}\n\n.inforow {\n   \n    flex-grow: 1;\n    width: 33.3%;\n    \n}\n\n#fixedbs {\n    \n    text-align: center;\n    " +
                "position: absolute;\n    top: 206px;\n    left: 70px;\n    color: black;\n    \n}\n\n";
            string html = String.Format("<!doctype html>\n\n<html lang=\"en\">\n<head>\n \n    <meta charset=\"utf-8\">\n\n    <title>StageBot User Profile</title>\n\n    " +
                "<link rel=\"stylesheet\" href=\"{0}\">\n\n</head>\n\n<body> \n    \n    <div id=\"window\">\n    \n        <div id=\"header\">\n\n            " +
                "<div id=\"pfp\"></div>\n\n            <p id=\"name\"><b>{1}#{2}</b></p>\n\n        </div>\n\n        <div id=\"content\">\n\n            " +
                "<div id=\"probox\">\n\n                <div id=\"probar\"></div>\n\n                <p id=\"fixedbs\"><i>cur lvl prog / total lvl exp</i></p>\n\n            " +
                "</div>\n\n            <div id=\"row\">\n\n                <div class=\"inforow\" id=\"level\">\n\n                    <p id=\"yes\">Level</p>\n                   " +
                " <p id=\"no\"><b>11</b></p>\n\n                </div>\n\n                <div class=\"inforow\" id=\"infolist\">\n                    <p class=\"info\">Total EXP</p>\n" +
                "                    <p class=\"info\">Server Rank</p>\n                    <p class=\"info\">Global Rank</p>\n                </div>\n\n                <div class=\"inforow\" id=\"statlist\">\n" +
                "                    <p class=\"info\">xxxxEXP</p>\n                    <p class=\"info\">#xxxx</p>\n                    <p class=\"info\">#xxxx</p>\n                </div>\n\n            </div>\n\n " +
                "       </div>  \n        \n    </div>\n    \n</body>\n</html>", css, Context.User.Username, Context.User.Discriminator);
            var converter = new HtmlToImageConverter
            {
                Width = 400,
                Height = 400
            };
            var pngBytes = converter.GenerateImage(html, NReco.ImageGenerator.ImageFormat.Png);
            await Context.Channel.SendFileAsync(new MemoryStream(pngBytes), "Profile.png");

        }

CSS

@font-face {
  font-family: 'Raleway';
  src: URL('Raleway-Regular.ttf') format('truetype');
}

html {

    font-family: 'Raleway', sans-serif;

}

#probar {

    height:24px;
    width:50%;
    background-color: skyblue;
    border-radius: 30px;

}

#probox {

    background-color: lightblue;
    width: 100%;
    margin: auto;
    border-radius: 30px;

}

#window {

    width: 300px;
    background-color: lightgray;
    margin: 0;
/*
    background-image: url(dafef97cb397e61f4c47ef27523b092c.jpg);
    background-size:cover;
    background-repeat: no-repeat;
*/

}

#header {

    width: 90%;
    margin: auto;
    padding-top: 10px;

}

#pfp {

    height: 150px;
    width: 150px;
    border-radius: 30px;
    margin: auto;
    border: gray solid 1px;

}

#name {

    text-align: center;

}

#content{

    width: 90%;
    margin: auto;
    padding-bottom: 10px;
    color: black;

}

.info {

    padding-bottom: 5px;
    font-size: 12px;

}

#row {

    display: flex;
    color: black;

}

#level {

    margin: auto;

}

#yes {

    margin: 0;
    text-align: center;

}

#no {

    font-size: 40px;
    margin: 0;
    text-align: center;
    border: solid black 1px;

}

#infolist {

    text-align: center;
    margin-top: 15px;

}

#statlist {

    text-align: right;
    margin-top: 15px;

}

.inforow {

    flex-grow: 1;
    width: 33.3%;

}

#fixedbs {

    text-align: center;
    position: absolute;
    top: 206px;
    left: 70px;
    color: black;

}

HTML:

<!doctype html>

<html lang="en">
<head>

    <meta charset="utf-8">

    <title>discord thing</title>

    <link rel="stylesheet" href="stylesheet.css">

</head>

<body> 

    <div id="window">

        <div id="header">

            <div id="pfp"></div>

            <p id="name"><b>Garonen#6115</b></p>

        </div>

        <div id="content">

            <div id="probox">

                <div id="probar"></div>

                <p id="fixedbs"><i>cur lvl prog / total lvl exp</i></p>

            </div>

            <div id="row">

                <div class="inforow" id="level">

                    <p id="yes">Level</p>
                    <p id="no"><b>11</b></p>

                </div>

                <div class="inforow" id="infolist">
                    <p class="info">Total EXP</p>
                    <p class="info">Server Rank</p>
                    <p class="info">Global Rank</p>
                </div>

                <div class="inforow" id="statlist">
                    <p class="info">xxxxEXP</p>
                    <p class="info">#xxxx</p>
                    <p class="info">#xxxx</p>
                </div>

            </div>

        </div>  

    </div>

</body>
</html>

对于输出，我正在寻找一些东西 like this

目前，输出是this

最佳答案

<link>当我们要引用外部 css 文件时使用标签。在您的示例中，我们有一个包含实际 css 代码的 css 字符串，因此您必须使用 <style>标签。请更换整个 html下面给出的字符串变量。

string html = String.Format("<!doctype html>\n\n<html lang=\"en\">\n<head>\n \n    <meta charset=\"utf-8\">\n\n    <title>StageBot User Profile</title>\n\n    " +
                "<style>{0}</style>\n\n</head>\n\n<body> \n    \n    <div id=\"window\">\n    \n        <div id=\"header\">\n\n            " +
                "<div id=\"pfp\"></div>\n\n            <p id=\"name\"><b>{1}#{2}</b></p>\n\n        </div>\n\n        <div id=\"content\">\n\n            " +
                "<div id=\"probox\">\n\n                <div id=\"probar\"></div>\n\n                <p id=\"fixedbs\"><i>cur lvl prog / total lvl exp</i></p>\n\n            " +
                "</div>\n\n            <div id=\"row\">\n\n                <div class=\"inforow\" id=\"level\">\n\n                    <p id=\"yes\">Level</p>\n                   " +
                " <p id=\"no\"><b>11</b></p>\n\n                </div>\n\n                <div class=\"inforow\" id=\"infolist\">\n                    <p class=\"info\">Total EXP</p>\n" +
                "                    <p class=\"info\">Server Rank</p>\n                    <p class=\"info\">Global Rank</p>\n                </div>\n\n                <div class=\"inforow\" id=\"statlist\">\n" +
                "                    <p class=\"info\">xxxxEXP</p>\n                    <p class=\"info\">#xxxx</p>\n                    <p class=\"info\">#xxxx</p>\n                </div>\n\n            </div>\n\n " +
                "       </div>  \n        \n    </div>\n    \n</body>\n</html>", css, Context.User.Username, Context.User.Discriminator);

关于c# - 如何将 css 代码引用到 HtmlToImageConverter，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55310171/

25 4 0
文章推荐： html - 如何在表格中一行显示文字？
文章推荐： Python setuptools 从命令行覆盖版本
文章推荐： Python CIM_DataFile 按完整路径搜索文件
文章推荐： html - 需要帮助让我的 div 显示内联
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com