Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Black render with omitBackground: true #3234

Closed
daneren2005 opened this issue Sep 12, 2018 · 1 comment · Fixed by #3240
Closed

Black render with omitBackground: true #3234

daneren2005 opened this issue Sep 12, 2018 · 1 comment · Fixed by #3240

Comments

@daneren2005
Copy link

daneren2005 commented Sep 12, 2018 •
edited

Steps to reproduce

Tell us about your environment:

  • Puppeteer version: 1.8.0, 1.1.0 (tried because another issue said was fixed there), 0.13.0 (updated from)
  • Platform / OS version: Ubuntu 16.04 (Heroku) Ubuntu 18.04 (local dev) as well as Debian Stretch (docker image)
  • Node.js version: 9.2.x

What steps will reproduce the problem?

I am using the following script: render-svg.js:

const puppeteer = require('puppeteer');

if (process.argv.length < 4 || process.argv.length > 6) {
	console.log('Usage: output-html.js URL filename [width] [height]');
} else {
	const inputFile = process.argv[2];
	const outputFile = process.argv[3];

	(async() => {
		const browser = await puppeteer.launch({ args: ['--no-sandbox', '--disable-setuid-sandbox', '--single-process'], timeout: 600000 });
		const page = await browser.newPage();

		page.on("pageerror", function(err) {
			var tmp = err.toString();
			console.log("Page error: " + tmp);
		});

		if(process.argv.length == 6) {
			var pageWidth = parseInt(process.argv[4]);
			var pageHeight = parseInt(process.argv[5]);

			await page.setViewport({
				width: pageWidth,
				height: pageHeight
			});
		}

		try {
			await page.goto('file://' + inputFile, {
				timeout: 6000000
			});

			if (outputFile.includes('jpg') || outputFile.includes('png')) {
				await page.screenshot({
					path: outputFile,
					omitBackground: true
				});
			} else if (outputFile.includes('pdf')) {
				await page.pdf({path: outputFile});
			}
		} catch(e) {
			console.log('Failed to render with error: ' + e.toString());
		}

		await browser.close();
	})();
}

And trying to render this sample html file with SVG embedded in it:

<!DOCTYPE html>
<html>
	<head>
	</head>

	<body>
		<svg xmlns="http://www.w3.org/2000/svg" width="663" height="217" requires_chrome="true" inch_width="6.906222982885085" inch_height="2.2604078239608802"><text x="0" y="30.88012080242857" textLength="659"><tspan style="font-size: 32.0001px; fill: rgb(0, 0, 0); font-family: &quot;ewert&quot;, &quot;emoji&quot;, &quot;open sans&quot;, &quot;noto sans cjk&quot;, &quot;noto sans arabic&quot;;" textLength="659">Type&nbsp;here&nbsp;with&nbsp;a&nbsp;bunch&nbsp;of&nbsp;tex</tspan><tspan style="font-size: 32.0001px; fill: rgb(0, 0, 0); font-family: &quot;ewert&quot;, &quot;emoji&quot;, &quot;open sans&quot;, &quot;noto sans cjk&quot;, &quot;noto sans arabic&quot;; font-weight: bold;" textLength="659">t</tspan></text><text x="0" y="73.44028729696743" textLength="659"><tspan style="font-size: 32.0001px; fill: rgb(0, 0, 0); font-family: &quot;ewert&quot;, &quot;emoji&quot;, &quot;open sans&quot;, &quot;noto sans cjk&quot;, &quot;noto sans arabic&quot;; font-weight: bold;" textLength="659">on&nbsp;mul</tspan><tspan style="font-size: 32.0001px; fill: rgb(0, 0, 0); font-family: &quot;ewert&quot;, &quot;emoji&quot;, &quot;open sans&quot;, &quot;noto sans cjk&quot;, &quot;noto sans arabic&quot;;" textLength="659">tiple&nbsp;with&nbsp;lots&nbsp;lines&nbsp;and</tspan></text><text x="0" y="116.00045379150629" textLength="659"><tspan style="font-size: 32.0001px; fill: rgb(0, 0, 0); font-family: &quot;ewert&quot;, &quot;emoji&quot;, &quot;open sans&quot;, &quot;noto sans cjk&quot;, &quot;noto sans arabic&quot;;" textLength="659">and&nbsp;see&nbsp;how&nbsp;this&nbsp;lets&nbsp;see&nbsp;how</tspan></text><text x="0" y="158.56062028604512" textLength="659"><tspan style="font-size: 32.0001px; fill: rgb(0, 0, 0); font-family: &quot;ewert&quot;, &quot;emoji&quot;, &quot;open sans&quot;, &quot;noto sans cjk&quot;, &quot;noto sans arabic&quot;;" textLength="659">this&nbsp;aligns&nbsp;with&nbsp;lets&nbsp;see&nbsp;how</tspan></text><text x="0" y="201.12078678058398"><tspan style="font-size: 32.0001px; fill: rgb(0, 0, 0); font-family: &quot;ewert&quot;, &quot;emoji&quot;, &quot;open sans&quot;, &quot;noto sans cjk&quot;, &quot;noto sans arabic&quot;;">this&nbsp;aligns&nbsp;</tspan></text></svg>	</body>

	<style>
		body {
			margin: 0;
			padding: 0;
		}
	</style>

	<script type="text/javascript">
		$(function() {
		});
	</script>
</html>

What is the expected result?
Get a rendered jpg. Example with omitBackground: false which has a white background:
with-background

What happens instead?
Get a black jpg with omitBackground: true:

omit-background
@daneren2005 daneren2005 reopened this Sep 12, 2018
@daneren2005 daneren2005 changed the title Black screen with omitBackground: true Black render with omitBackground: true Sep 12, 2018
@lusarz lusarz mentioned this issue Sep 13, 2018
Merged
@daneren2005
Copy link
Author

After #3240 I realize I am a retard. Sorry for trying to add transparency to a jpg and not realizing why it wasn't working 🤦‍♂️

aslushnikov pushed a commit that referenced this issue Sep 14, 2018
@lusarz @aslushnikov
fix: set JPG background to white when omitBackground option is used (#…
d929f7e 
…3240)

Fixes #3234
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: set JPG background to white when omitBackground option is used
1 participant
@daneren2005