Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Color issue

See original GitHub issue

Hey im seeing a color mismatch. 😕 im using bootstrap as a css lib where the text should be the color white and the red and blue under the progress bar shouldnt be faded

im running on a aws ubuntu 20 instance

Current Image:

Previously Generated(goal): imageDesired

const image = fs.readFileSync('./temp/images/backgrounds/bg.png');
const buffer = new Buffer(image);
const base64Image = buffer.toString('base64');
const dataURI = 'data:image/jpeg;base64,' + base64Image;

nodeHtmlToImage({
                output: `./temp/images/stats/image.png`,
                html: `<html lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <style>html {-webkit-print-color-adjust: exact;} .margin-0{margin: 0px;}.margin-10{margin: 10px;}.margin-20{margin: 20px;}.margin-top-10{margin-top: 10px;}.margin-top-20{margin-top: 20px;}.margin-left-10{margin-left: 10px;}.margin-right-10{margin-right: 10px;}.margin-bottom-10{margin-bottom: 10px;}.margin-bottom-0{margin-bottom: 0px;}.padding-0{padding: 0px;}.padding-10{padding: 10px;}.padding-20{padding: 20px;}.padding-top-10{padding-top: 10px;}.padding-left-10{padding-left: 10px;}.padding-right-10{padding-right: 10px;}.padding-bottom-10{padding-bottom: 10px;}.padding-bottom-0{padding-bottom: 0px;}.grey-transparent-bg{background-color: rgba(0,0,0,.5);}.bottom-align{position: absolute; bottom: 0px;}.full-width{width: 100%;}.full-height{height: 100%;}</style></head><body style="width: 600px; height: 375px; background-color:transparent;"> <div class="container margin-top-10 border border-warning rounded" style="overflow: hidden;"> <div class="row" style="height: 15%;"> <div class="col-3 bg-dark d-flex align-items-center"> <h6 class="margin-bottom-0"> <span class="text-white">Lv.</span> <span class="badge badge-secondary margin-left-10 text-white">{{level}}</span></h6> </div><div class="col text-center bg-secondary d-flex align-items-center justify-content-center"> <h5 class="margin-bottom-0">{{username}}#{{discriminator}}</h5> </div><div class="col-2 bg-secondary d-flex align-items-center justify-content-center"> <img class="border border-dark rounded-circle bg-dark" src="{{userIcon}}" style="width:50px;height:50px;"/> </div></div><div class="row" style="height: 84.5%; background-image: url({{background}}); background-size: 100% 100%;"> <div class="col rounded padding-0 margin-20 grey-transparent-bg"> <div class="row"> <div class="col margin-10 text-white"> Level Status:{{levelCompletion}}% <span style="font-size: 10px; color: gray;">({{experience}}/{{levelExp}})</span> <div class="progress rounded-pill"> <div class="progress-bar bg-danger rounded-pill" role="progressbar" style="width:{{levelCompletion}}%"> </div></div><span class="margin-top-10 badge badge-danger">{{owner}}</span> <span class="margin-top-10 badge badge-primary">{{guildOwner}}</span> <span class="margin-top-10 badge badge-warning">{{supporter}}</span> </div></div><div class="row margin-top-20 text-white padding-left-10 padding-right-10" style="height: 70px;"> <div class="col text-center"> <div class="card bg-dark full-height"> <h6>Messages sent in{{guildName}}</h6> <span class="badge badge-secondary full-width bottom-align">{{messages}}</span> </div></div><div class="col text-center"> <div class="card bg-dark full-height"> <h6>Commands used in{{guildName}}</h6> <span class="badge badge-secondary full-width bottom-align">{{commands}}</span> </div></div><div class="col text-center"> <div class="card bg-dark full-height"> <h6>Mentions sent in{{guildName}}</h6> <span class="badge badge-secondary full-width bottom-align">{{mentions}}</span> </div></div></div><div class="row margin-top-10 text-white padding-left-10 padding-right-10" style="height: 70px;"> <div class="col text-center"> <div class="card bg-dark full-height"> <h6>Favorite command</h6> <span class="badge badge-secondary full-width bottom-align">{{command}}</span> </div></div><div class="col text-center"> <div class="card bg-dark full-height"> <h6>Number of fish caught</h6> <span class="badge badge-secondary full-width bottom-align">{{fishCaught}}</span> </div></div><div class="col text-center"> <div class="card bg-dark full-height"> <h6>Items held</h6> <span class="badge badge-secondary full-width bottom-align">{{itemsHeld}}</span> </div></div></div></div></div></div><script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script></body></html>`,
                content: {
                    level: 1,
                    username: 'SteeledSlagle13',
                    discriminator: '0113',
                    userIcon: '',
                    levelCompletion: (20 / 40) * 100,
                    experience: 20,
                    levelExp: 40,
                    owner: 'Owner',
                    guildOwner: 'Server Owner',
                    supporter: null, // TODO
                    guildName: 'STS',
                    messages: 0,
                    commands: 0,
                    mentions: 0,
                    command: null,
                    fishCaught: 0,
                    itemsHeld: 0,
                    background: dataURI
                },
                transparent: true,
                // waitUntil: 'networkidle0',
                // puppeteerArgs: '--force-color-profile=srgb|generic-rgb|color-spin-gamma24'
            }).then(() => {
                    console.log('Image created')
                });
            });