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.

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

Saving screenshot with headless chrome throws "invalid image size" error #167

Open
ykyuen opened this Issue Jan 10, 2018 · 2 comments

Comments

Projects
None yet
3 participants
@ykyuen
Copy link

ykyuen commented Jan 10, 2018

I followed the simple example and it works without problem. but if i ran the programme in headless chrome it threw the following error.

...
2018/01/10 16:21:02 -> {"id":13,"result":{"nodeId":36}}
2018/01/10 16:21:02 <- {"id":14,"method":"DOM.getBoxModel","params":{"nodeId":36}}
2018/01/10 16:21:02 -> {"id":14,"result":{"model":{"content":[0,96,1178,96,1178,96,0,96],"padding":[0,96,1178,96,1178,96,0,96],"border":[0,96,1178,96,1178,96,0,96],"margin":[0,96,1178,96,1178,96,0,96],"width":785,"height":0}}}
2018/01/10 16:21:02 <- {"id":15,"method":"Runtime.evaluate","params":{"expression":"(function(a) {\n\t\treturn a[0].offsetParent !== null;\n\t})($x('/html[1]/body[1]/div[2]/div[1]/div[2]/nav[1]'))","objectGroup":"console","includeCommandLineAPI":true,"returnByValue":true}}
2018/01/10 16:21:02 -> {"id":15,"result":{"result":{"type":"boolean","value":true}}}
2018/01/10 16:21:02 <- {"id":16,"method":"DOM.querySelector","params":{"nodeId":13,"selector":"#mobile-menu"}}
2018/01/10 16:21:02 -> {"id":16,"result":{"nodeId":36}}
2018/01/10 16:21:02 <- {"id":17,"method":"DOM.getBoxModel","params":{"nodeId":36}}
2018/01/10 16:21:02 -> {"id":17,"result":{"model":{"content":[0,96,1178,96,1178,96,0,96],"padding":[0,96,1178,96,1178,96,0,96],"border":[0,96,1178,96,1178,96,0,96],"margin":[0,96,1178,96,1178,96,0,96],"width":785,"height":0}}}
2018/01/10 16:21:02 <- {"id":18,"method":"Runtime.evaluate","params":{"expression":"(function(a) {\n\t\treturn a[0].offsetParent !== null;\n\t})($x('/html[1]/body[1]/div[2]/div[1]/div[2]/nav[1]'))","objectGroup":"console","includeCommandLineAPI":true,"returnByValue":true}}
2018/01/10 16:21:02 -> {"id":18,"result":{"result":{"type":"boolean","value":true}}}
2018/01/10 16:21:02 <- {"id":19,"method":"DOM.getBoxModel","params":{"nodeId":36}}
2018/01/10 16:21:02 -> {"id":19,"result":{"model":{"content":[0,96,1178,96,1178,96,0,96],"padding":[0,96,1178,96,1178,96,0,96],"border":[0,96,1178,96,1178,96,0,96],"margin":[0,96,1178,96,1178,96,0,96],"width":785,"height":0}}}
2018/01/10 16:21:02 <- {"id":20,"method":"Runtime.evaluate","params":{"expression":"(function(x, y) {\n\t\twindow.scrollTo(x, y);\n\t\treturn [window.scrollX, window.scrollY];\n\t})(0, 96)","objectGroup":"console","includeCommandLineAPI":true,"returnByValue":true}}
2018/01/10 16:21:02 -> {"id":20,"result":{"result":{"type":"object","value":[0,96]}}}
2018/01/10 16:21:02 <- {"id":21,"method":"Page.captureScreenshot","params":{}}
2018/01/10 16:21:02 -> {"id":21,"result":{"data":"iVBOR......uQmCC"}}
2018/01/10 16:21:02 png: invalid format: invalid image size: 0x0
exit status 1

the main.go

// Command simple is a chromedp example demonstrating how to do a simple google
// search.
package main

import (
  "context"
  "io/ioutil"
  "log"
  "time"

  "github.com/chromedp/cdproto/cdp"
  "github.com/chromedp/chromedp"
  "github.com/chromedp/chromedp/runner"
)

func main() {
  var err error

  // create context
  ctxt, cancel := context.WithCancel(context.Background())
  defer cancel()

  // create chrome instance
  c, err := chromedp.New(ctxt, chromedp.WithLog(log.Printf), chromedp.WithRunnerOptions(
    runner.Flag("headless", true),
    runner.Flag("disable-gpu", true),
    runner.Flag("no-first-run", true),
    runner.Flag("no-default-browser-check", true),
    runner.Port(9222),
  ))
  if err != nil {
    log.Fatal(err)
  }

  // run task list
  err = c.Run(ctxt, screenshot(`https://brank.as/`, `#mobile-menu`))
  if err != nil {
    log.Fatal(err)
  }

  // shutdown chrome
  err = c.Shutdown(ctxt)
  if err != nil {
    log.Fatal(err)
  }

  // wait for chrome to finish
  err = c.Wait()
  if err != nil {
    log.Fatal(err)
  }
}

func screenshot(urlstr, sel string) chromedp.Tasks {
  var buf []byte
  return chromedp.Tasks{
    chromedp.Navigate(urlstr),
    chromedp.Sleep(2 * time.Second),
    chromedp.WaitVisible(sel, chromedp.ByID),
    chromedp.Screenshot(sel, &buf, chromedp.ByID),
    chromedp.ActionFunc(func(context.Context, cdp.Executor) error {
      return ioutil.WriteFile("screenshot.png", buf, 0644)
    }),
  }
}

I am on Archlinux with Chromium Version 63.0.3239.132 (Developer Build) (64-bit)

Any ideas? thx.

@MTRNord

This comment has been minimized.

Copy link

MTRNord commented Mar 12, 2018

Happens also on windows @ykyuen this seems to happen if the selected HTML node is empty (means has a size of 0x0) I guess check if your selector is correct

@alejoloaiza

This comment has been minimized.

Copy link

alejoloaiza commented May 22, 2018

Hi @MTRNord, seems like an issue because, the same code commenting the line runner.Flag("headless",true), works fine. at least for me.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment