Image not downloaded correctly

[livissnack]

Error: Sending code to https://carbon.now.sh went wrong.

This is mostly due to:

– Insensical input like --start 10 --end 2
– Carbon being down or taking too long to respond
– Your internet connection not working or being too slow

[HarshitKaushik]

Same issue. Also, I'm sure about two of these possible reasons.

• Not passing any Insensical input
• Internet connection is working and is 120 Mbps.

@mixn Please help to let us try this awesome thing out.

[mixn]

Thanks for reporting, @livissnack. :) It’s really hard for me to debug this in any way, since this is the default error. What OS are you both on? @HarshitKaushik I haven’t tested it on Windows yet… should work for macOS and Linux. :)

[yedhink]

I also got the same error. tried it in linux. but passing the -o flag opens it in browser, and was able to edit the image from there.

[mixn]

@yedhink Where does the full URL of TROUBLESHOOTING lead to? Thanks in advance.

[yedhink]

@mixn oops didn't see that it has been cut off . here's the full link :-
https://github.com/GoogleChrome/puppeteer/blob/master/docs/troubleshooting.md

[HarshitKaushik]

@mixn I am on MacOS Sierra Version 10.12.6

Also, shows the same default error to me. Should I try with -o flag?

[mixn]

@yedhink Have you tried the Troubleshooting section for Linux machines mentioned here? https://github.com/GoogleChrome/puppeteer/blob/master/docs/troubleshooting.md#chrome-headless-doesnt-launch

@HarshitKaushik Interesting. I’ve only tested it on High Sierra so far, is an upgrade for you possible? Or no chance?

@ all I’ve added additional error reporting on branch bug/9, hopefully this will help narrow down the problem. Please clone the repo, inside it fetch the bug/9 branch, install the dependencies and run the main script aka. do this:

git clone https://github.com/mixn/carbon-now-cli.git
cd carbon-now-cli
git fetch origin bug/9:bug/9
git checkout bug/9
npm install
node cli.js test/test-dummies/_index.html

Also, running npm t might reveal some helpful information, too.

[Sneezoo]

same issue here.
Fixed it for me with the help of the link @mixn send before.
Unfortunately a kernel update was not the solution, but a small change in headless-visit.js instead:

const browser = await puppeteer.launch({
  headless: false,
  args: ['--no-sandbox', '--disable-setuid-sandbox']
});

Fixed the issue, but as stated in the chrome and puppetteer docs this would be a potential security risk!

@mixn I would like to create a PR with a new simple --disable-sandbox flag. Ok for you?

[mixn]

My good friend and colleague @Sneezoo was so nice to not just test this on his Linux machine, but also apparently fix it. ❤️ Thanks so much, Flotto — super appreciated!

I’ve reviewed and run the whole thing with -S, looks good to me, but also, it has worked for me before. 😅

It’d be good if @livissnack @HarshitKaushik @yedhink could do the same and give feedback prior to merging. Please do this

git clone https://github.com/Sneezoo/carbon-now-cli.git
cd carbon-now-cli
npm i
node cli.js test/test-dummies/_index.html -S

🤞 🤞 🤞

[HarshitKaushik]

I tried with the change in headless-visit.js and from bug/9 branch @mixn . Still it seems to be not working with MasOS Sierra Version 10.12.6.

[mixn]

@HarshitKaushik Could you try it with a different save location on that branch? E.g. node cli.js test/test-dummies/_index.html -l ~/Desktop

[HarshitKaushik]

@mixn tried and same error. :(

[mixn]

@HarshitKaushik Out of curiosity and to see if this is related, pls try this #9 (comment) and report back. Thank you. :)

[HarshitKaushik]

@mixn I think I have found the issue.

Additional info:

Error: ENOENT: no such file or directory, rename '/Users/harshit/Documents/home-workspace/carbon-now-cli/carbon.png' -> '/Users/harshit/Documents/home-workspace/carbon-now-cli/_index-616b5da3db.png'

Additional info:

Error: ENOENT: no such file or directory, rename '/Users/harshit/Documents/home-workspace/carbon-now-cli/carbon.png' -> '/Users/harshit/Documents/home-workspace/carbon-now-cli/_index-e26146cc4b.png'

In file headless-visit.test.js, defaultDownloadName is expecting carbon.png but we are getting an image name with "_index-" as prefix and then some hash.

[mixn]

@HarshitKaushik The file is first downloaded as carbon.png then renamed to originalfilename-ID.png. So the renaming fails because the file doesn’t exist, which means the download fails in the first place. Have you tried upgrading to High Sierra to see if the error is still there? Also, when you run @Sneezoo’s branch, did you correctly use the -S flag as mentioned above?

[HarshitKaushik]

Hi @mixn , thanks for letting me know. I'll upgrade to High Sierra and update later on this issue. :)

[mittalyashu]

Any progress on this issue?

[mixn]

@mittalyashu No proper feedback has been given so far and I unfortunately can’t reproduce this. Try this please and report back. :)

[mittalyashu]

@mixn Here's the feedback

git clone https://github.com/Sneezoo/carbon-now-cli.git
cd carbon-now-cli
npm i

node cli.js test/test-dummies/_index.html -S

https://youtu.be/zAuCNWSKWkc

[mixn]

@mittalyashu That looks very similar to this, the error is the same + it’s on Windows, even though it is 7 — it’s Windows. 😅 Also doesn’t seem to be the same problem as others in this thread were experiencing, since their problems seem to be related to this issue.

[mittalyashu]

Here's the issue on chromium: https://bugs.chromium.org/p/chromium/issues/detail?id=831887

[HarshitKaushik]

@mixn Apology for the delay on the follow-up to this issue. I upgraded up Mac to High Sierra V 10.13.6 and still facing the same issue and the same error.

[molnarmark]

@mixn Please see this commit which fixes the image download issue people are having (including me) by using Chromium's screenshot API.

molnarmark@9738aa7

[mixn]

@molnarmark Thanks for your input and for playing with this, I appreciate it. :)

I am aware of the screenshot API and have tried using it in the very beginning but abandoned the idea pretty quickly due to the unacceptable image quality it resulted in.

Without screenshot API (1238 × 578):

Using screenshot API (589 × 258):

But your comment made me research this further and lead me to this and this and it did work. :)

With screenshot API + deviceScaleFactor: 2:

I will research this further, since it would likely mean no svg support. But maybe doing a screenshot could be opt-in via a flag, so it would work for everyone supporting only png, but using 'Page.setDownloadBehavior' by default, having support for both svg and png.

It’s also good to see that headless: true works flawlessly when 'Page.setDownloadBehavior' isn’t used, which wasn’t the case previously — I had to disable it.

I’ll most likely hotfix this tomorrow or Monday when back from ⛰🏃. I’m working on #12 on a separate branch atm and want to avoid conflicts as much as possible. 😄

PS: I can’t believe I typed this on a 📱. 🙄 😅
PPS: Thank you again, @molnarmark! This really made me happy. :)

[molnarmark]

@mixn Glad to be of help. :) Carbon CLI was a planned project for me, but had no time, so I'm glad I can help. 👍

[mixn]

Ok, here it goes. :)

The download is performed differently now, when -h is used. It’d be great if everyone in this thread could try this out. Especially cause I’m on a Retina display and don’t know for sure how deviceScaleFactor: 2 will behave on non-Retina displays.

Please do this:

git clone https://github.com/mixn/carbon-now-cli.git
cd carbon-now-cli
git checkout fix/9
npm i
node cli.js test/test-dummies/_unfold.js -h

This should lead to an image being downloaded that has the same quality as without having used -h. For me it works and it does look the same:

Regular usage:

Usage with -h:

@molnarmark, @mittalyashu, @HarshitKaushik, @yedhink, @livissnack

[HarshitKaushik]

@mixn @molnarmark working for me 😄😄😄

[molnarmark]

@mixn Works totally fine. 😄 Hopefully this gets put into the next branch and I can continue working on my slideshow tool. 👍

[mittalyashu]

@mixin got an error, in both cases (-h).

[mixn]

@mittalyashu Ups, I forgot to add this. But honestly, that shouldn’t have anything to do with a download failing. But we’ll see — I never trust Windows blindly. 😄 Pls repeat the steps @mittalyashu or just pull the changes inside your already existing, cloned repo and run the node part again. Thanks.

If it then doesn’t work either, I highly suggest for you to just download Puppeteer and play around with it a bit, trying to screenshot something, open pages, etc. I feel like this hasn’t that much more to do with carbon-now-cli from that point onwards.

Edit: Also, I’m now noticing you’re apparently running this via Guest Account@YASHU. Please run as admin, just to make sure.

[mittalyashu]

After re-trying few times, and it worked finally.

Input

Output

Additional information

This command doesn't work node cli.js test/test-dummies/_unfold.js, only this does node cli.js test/test-dummies/_unfold.js -h

When I use this node cli.js test/test-dummies/_unfold.js -h it doesn't open the chromium browser, but if I use it without -h when it opens up the browser. Why? 🤔

When the file is written to the disk, it is renamed from carbon.png to {name of the file}-{randonvalue}.png. Why?

Why does the image has an black line on the left side?

[mixn]

@mittalyashu Finally! 👏 Glad it worked.

When I use this node cli.js test/test-dummies/_unfold.js -h it doesn't open the chromium browser, but if I use it without -h when it opens up the browser. Why? 🤔

Because headless: true doesn’t seem to work with 'Page.setDownloadBehavior' (the default download behaviour, issue with Puppeteer). Using -h downloads the image differently, which works without issues with headless: true.

When the file is written to the disk, it is renamed from carbon.png to {name of the file}-{randonvalue}.png. Why?

Pretty obvious, I think 😄 — to not overwrite already downloaded images. :) Also, this is a preparation for #5 , the images need to have different names.

[mittalyashu]

Because headless: true doesn’t seem to work with 'Page.setDownloadBehavior' (the default download behaviour, issue with Puppeteer). Using -h downloads the image differently, which works without issues with headless: true.

Pretty obvious, I think — to not overwrite already downloaded images. :) Also, this is a preparation for #5 , the images have to have different names.

👍👍👍👍👍

But what about the image have black line at the left side.

[mixn]

@mittalyashu It seems to be related to the font used. Doesn’t occur to me with Anonymous Pro, Dank Mono, Inconsolata, Iosevka, Monoid, Ubuntu Mono. With the rest it does. Seems to be some pixel-issue related to how the font is rendered. 🤷‍♂️

[mixn]

@mittalyashu Ok, I just fixed this for me — it works with every font now without the black 1px line when -h is used. 🎉 Was due rounding issues with certain fonts. Please pull the changes on fix/9 and try again, should work without problems. :)

Using Hack:

Using Droid Sans Mono:

Using IBM Plex Mono:

[mittalyashu]

Yup it worked. 🎉🎉🎉

Found another problem 😓

$ node cli.js test/test-dummies/_unfold.js -h -i
? Syntax theme: Seti
? Window theme: None
? Font family: Fira Code
? Font size: 16
? Background color: rgba(191,220,238,1)
? Include window controls? Yes
? Include line numbers? No
? Auto adjust width? Yes
? Line height: 133%
? Vertical padding 50
? Horizontal padding 60
? Include drop shadow? Yes
? Drop shadow y-offset 20px
? Drop shadow blur 73
? Make squared image? No
? Add Carbon watermark? No
? Export size 4x
? Export as… png
? Save these settings as a preset? Yes
? Name of the preset? Use kebab-case. carbon
 √ Processing test\test-dummies\_unfold.js
 √ Preparing connection
 ↓ Opening in browser [skipped]
 √ Fetching beautiful image

  Done!

  The file can be found here: C:\Users\YASHU\Desktop\carbon-now-cli/_unfold-c4f2
1ec11b.png �

Here's the output with no padding (vertical or horizontal)

[mixn]

@mittalyashu Great! 🎉 About time. 😉

Also, be aware that this thread is originally only for failed downloads, not follow-up stuff. I will merge fix/9 later on and publish a new version that ships with -h and then close this issue. 👍 🎉

I’ll still address your problem… what you want is a valid CSS unit, so what you’re looking for here is 50px and 60px. 😉 It even says so as the default setting in interactive mode, e.g. 0px. It doesn’t say 0.

[mittalyashu]

Great! 🎉 About time. 😉

Yeah, finally it working. Now you can close this issue.

[HarshitKaushik]

@mixn @mittalyashu Really appreciate the help with investigating and fixing the issue. This thing is working for me now. And feels awesome! 😉

[mixn]

As a TL;DR for everyone, who might eventually end up here somehow:

I published v1.1.0 and as of that version, carbon-now-cli ships with a --headless/-h flag.

This flag avoids Puppeteer’s experimental Page.setDownloadBehavior and uses elementHandle.screenshot() instead.

elementHandle.screenshot() works across all OS’s, but leads to just pngs @ 2x resolutions — meaning, it will ignore svg / 4x/1x in interactive mode. I think that’s absolutely fine for an occasional edge case though. 😊🙃

I am very happy to close this big issue thread and want to thank everyone who helped and contributed to fixing this — it’s very much appreciated! 🎉 @molnarmark @Sneezoo @mittalyashu @HarshitKaushik @livissnack @yedhink

[molnarmark]

While the fix was working for me @mixn, I went through an OS switch (Mint -> Elementary), and got a different error message:

  ✔ Processing /tmp/unfold.js
  ✔ Preparing connection
  ↓ Opening in browser [skipped]
  ✖ Fetching beautiful image
    → TROUBLESHOOTING: https://github.com/GoogleChrome/puppeteer/blob/master/docs/troubles
…
    Copying image to clipboard

  Error: Sending code to https://carbon.now.sh went wrong.

  This is mostly due to:

  – Insensical input like `--start 10 --end 2`
  – Carbon being down or taking too long to respond
  – Your internet connection not working or being too slow

  Additional info:

  Error: Failed to launch chrome!
[0322/123307.506231:ERROR:zygote_host_impl_linux.cc(89)] Running as root without --no-sandbox is not supported. See https://crbug.com/638180.


TROUBLESHOOTING: https://github.com/GoogleChrome/puppeteer/blob/master/docs/troubleshooting.md

Adding --no-sandbox to the puppeteer.launch call fixed it for me. I'm probably not the only one who will face this issue though.

const browser = await puppeteer.launch({
	headless,
	args: ['--no-sandbox']
});

[mixn]

@molnarmark I assumed this was the case, since I’ve had it happen in another project a few days ago. :) I’ll most likely add a --disable-sandbox flag as initially suggested by @Sneezoo a long time ago.

Or, he can add it if he wants? :) Don’t want to take away from his work…

I was thinking no shorthand, e.g. only --disable-sandbox. Time/interest my man? :) @Sneezoo

One day I will grow up and change OS more often like a real hAxX0r, too… @molnarmark 👑😎

[amb1s1]

I'm having the same issue on CentOs7:

➜  carbon-now-cli git:(master) ✗ node cli.js test/test-dummies/_unfold.js -h
  ✔ Processing test/test-dummies/_unfold.js
  ✔ Preparing connection
  ↓ Opening in browser [skipped]
  ✖ Fetching beautiful image
    → TROUBLESHOOTING: https://github.com/GoogleChrome/puppeteer/blob/master/docs/troubleshooting.md
    Copying image to clipboard

  Error: Sending code to https://carbon.now.sh went wrong.

  This is mostly due to:

  – Insensical input like `--start 10 --end 2`
  – Carbon being down or taking too long to respond
  – Your internet connection not working or being too slow

  Additional info:

  Error: Failed to launch chrome!
/home/gomdavid/carbon-now-cli/node_modules/puppeteer/.local-chromium/linux-686378/chrome-linux/chrome: error while loading shared libraries: libXcomposite.so.1: cannot open shared object file: No such file or directory


TROUBLESHOOTING: https://github.com/GoogleChrome/puppeteer/blob/master/docs/troubleshooting.md

[amb1s1]

This fix my issue on my ubuntu box:

sudo apt-get install gconf-service libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libcairo2 libcups2 libdbus-1-3 libexpat1 libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1 libxcursor1 libxdamage1 libxss1 libxtst6 libappindicator1 libnss3 libasound2 libatk1.0-0 libc6 ca-certificates fonts-liberation lsb-release xdg-utils wget