c# - 如何将 css 代码引用到 HtmlToImageConverter
问题描述
对于我正在创建的 Discord Bot,我需要通过“profile”命令生成用户配置文件。HTML 显示正常,但没有使用我的任何 CSS 样式。如何让 html 字符串包含我的 CSS 样式?
我对 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>
对于输出,我正在寻找这样的东西
目前,输出是这样的
解决方案
<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);
推荐阅读
- python - 如何在后台/不同内核中运行 YouTube 流媒体脚本?
- javascript - 导入的异步函数的 Async Await 未正确等待
- ionic3 - ionic5 中的 ionViewDidLoad 和 ionViewWillUnload 对应的生命周期钩子
- xcode - 我刚刚为 Mac 上的 iOS 开发人员设置了 react native 的工作环境,但是在尝试构建我的第一个基本应用程序时遇到了这个错误
- laravel - Laravel api 路由发布调用按预期工作,获取调用返回空白 html 响应
- react-native - Expo react native如何更改pdf文本
- python - 如何修复 Keras Flatten 图层的错误?
- sql-server - 如何为 Azure SQL 上的弹性查询设置 CONNECTION_OPTIONS = 'ApplicationIntent=ReadOnly'?
- javascript - 对象的成员被忽略
- java - API 调用中的 TLS 加密和散列