node-html-to-image
node-html-to-image copied to clipboard
frinyvonnick
Only rendering the first div within the body
After trying to find out why it's doing this I cannot figure it out. My HTML renders correctly in a browser however once I try using this library to convert it into an image it will only render the first div. Any ideas why it's doing this? `
var html = '
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
body {
width: 930px;
height: 280px;
}
#background {
background: #34495e;
width: 100%;
height: 100%;
}
#avatar-div {
display: flex;
justify-content: center;
align-items: center;
}
#avatar {
height: 75%;
width: 75%;
border-radius: 50%;
border: 7px solid #2ecc71;
}
.userInfo {
height: 33%;
display: flex;
align-items: flex-end;
}
.userInfo>p {
font-family: 'Roboto', serif;
text-align: right;
margin: 0;
}
#rank-text, #rank-num, #username, #cur-xp {
color: #ecf0f1;
}
#rank-text, #level-text {
font-size: 20px;
line-height: 1;
}
#rank-num, #level-num {
font-size: 60px;
line-height: 0.75;
}
#level-text, #level-num {
color: #81ecec;
}
#username {
font-size: 40px;
width: 100%;
text-align: left;
line-height: 1;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
#cur-xp {
width: 100%;
font-size: 18px;
line-height: 1.3;
padding-right: 6px;
}
#next-xp {
text-align: left;
color: #95a5a6;
font-size: 18px;
line-height: 1.3;
white-space: nowrap;
}
#progress-bar-bg, #progress-bar {
background-color: #353b48;
width: 98%;
height: 50%;
border-radius: 50px;
position: absolute;
top: 25;
left: 0;
}
#progress-bar {
background-color: #2ecc71;
z-index: 10;
border-radius: 50px;
width: ${barPercentage}%;
}
.h-100 {
height: 100%;
}
.w-100 {
width: 100%;
}
.p-0 {
padding: 0;
}
.pl-0 {
padding-left: 0;
}
.pr-2 {
padding-right: 40px;
}
</style>
</head>
<body>
<div class="container" id="background">
<div class="row">
<div class="col-lg-4 h-100" id="avatar-div">
<img id="avatar" src="${userURL}" alt="">
</div>
<div class="col-lg-8 h-100 pr-2">
<div class="row">
<div class="col-lg-6 userInfo"></div>
<div class="col-lg-3 userInfo p-0">
<p class="w-100" id="rank-text">RANK</p>
<p id="rank-num">#</p>
</div>
<div class="col-lg-3 userInfo">
<p class="w-100" id="level-text">LEVEL</p>
<p id="level-num">${userData.level}</p>
</div>
</div>
<div class="row">
<div class="col-lg-8 userInfo p-0">
<p id="username">${user.username}</p>
</div>
<div class="col-lg-4 userInfo">
<p id="cur-xp">${abriviatedXP}</p>
<p id="next-xp">/ ${abriviatedNext} xp</p>
</div>
</div>
<div class="row">
<div class="col-lg-12 userInfo pl-0">
<div id="progress-bar-bg"></div>
<div id="progress-bar"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
';
var img = await nodeHtmlToImage ({
html: html,
quality: 100,
type: 'jpeg',
puppeteerArgs: {
args: ['--no-sandbox'],
},
encoding: 'buffer',
});
`
output:
what it should look like (different avatar being displayed is not an issue):
Hello @Nicholas-Ingram 👋
Thank you for posting this issue 🙏 I tried your example but the code does not work. It seems to be missing variables I can't simply copy paste it. Could you provide a working reproduction code, please?
A part from that I released a new version (3.2.0) that lets you render a specific element. It might helps you fix your problem.
I am so sorry I could have sworn I swapped out the variables with placeholder code. But yes here you go and I'll have to give the new version a try when I get some time.
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
body {
width: 930px;
height: 280px;
}
#background {
background: #34495e;
width: 100%;
height: 100%;
}
#avatar-div {
display: flex;
justify-content: center;
align-items: center;
}
#avatar {
height: 75%;
width: 75%;
border-radius: 50%;
border: 7px solid #2ecc71;
}
.userInfo {
height: 33%;
display: flex;
align-items: flex-end;
}
.userInfo>p {
font-family: 'Roboto', serif;
text-align: right;
margin: 0;
}
#rank-text, #rank-num, #username, #cur-xp {
color: #ecf0f1;
}
#rank-text, #level-text {
font-size: 20px;
line-height: 1;
}
#rank-num, #level-num {
font-size: 60px;
line-height: 0.75;
}
#level-text, #level-num {
color: #81ecec;
}
#username {
font-size: 40px;
width: 100%;
text-align: left;
line-height: 1;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
#cur-xp {
width: 100%;
font-size: 18px;
line-height: 1.3;
padding-right: 6px;
}
#next-xp {
text-align: left;
color: #95a5a6;
font-size: 18px;
line-height: 1.3;
white-space: nowrap;
}
#progress-bar-bg, #progress-bar {
background-color: #353b48;
width: 98%;
height: 50%;
border-radius: 50px;
position: absolute;
top: 25;
left: 0;
}
#progress-bar {
background-color: #2ecc71;
z-index: 10;
border-radius: 50px;
width: 15%;
}
.h-100 {
height: 100%;
}
.w-100 {
width: 100%;
}
.p-0 {
padding: 0;
}
.pl-0 {
padding-left: 0;
}
.pr-2 {
padding-right: 40px;
}
</style>
</head>
<body>
<div class="container" id="background">
<div class="row">
<div class="col-lg-4 h-100" id="avatar-div">
<img id="avatar" src="https://cdn.discordapp.com/avatars/434879856870686720/70dd946adec862946969d873e6e15587.webp" alt="">
</div>
<div class="col-lg-8 h-100 pr-2">
<div class="row">
<div class="col-lg-6 userInfo"></div>
<div class="col-lg-3 userInfo p-0">
<p class="w-100" id="rank-text">RANK</p>
<p id="rank-num">#1</p>
</div>
<div class="col-lg-3 userInfo">
<p class="w-100" id="level-text">LEVEL</p>
<p id="level-num">18</p>
</div>
</div>
<div class="row">
<div class="col-lg-8 userInfo p-0">
<p id="username">THEDODDSQUADGAMING</p>
</div>
<div class="col-lg-4 userInfo">
<p id="cur-xp">99.99k</p>
<p id="next-xp">/ 99.99k xp</p>
</div>
</div>
<div class="row">
<div class="col-lg-12 userInfo pl-0">
<div id="progress-bar-bg"></div>
<div id="progress-bar"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
@Nicholas-Ingram The problem arrived due to screen resolution and since the screen is not browser's screen so it is unable to show responsiveness of bootstrap as browser does by adjusting the elements accordingly.I think your screen is not compatible with bootstrap's high resolution css classes.I have changed col-lg to col-xs (even col-sm will work fine since these twos works on device having low width & height) and it is working fine for me.I am Attaching the code in the issue_discussion.docx file which will generate the image which you are looking for by replacing col-lg with col-sm and col-xs.
@Nicholas-Ingram does the solution @saksham2105 provided fixed your issue?