ScreenShot Cannot display Chinese

[r6c]

What versions are you running?

$ go list -m github.com/chromedp/chromedp
$ google-chrome --version
$ go version

What did you do? Include clear steps.

I run ScreenShot example, but screenshot cannot display chinese.

What did you expect to see?

display chinese correctly.

What did you see instead?

display error code.

[r6c]

// Command screenshot is a chromedp example demonstrating how to take a
// screenshot of a specific element and of the entire browser viewport.
package main

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

	"github.com/chromedp/cdproto/emulation"
	"github.com/chromedp/cdproto/page"
	"github.com/chromedp/chromedp"
)

func main() {
	// create context
	ctx, cancel := chromedp.NewContext(context.Background())
	defer cancel()

	// capture screenshot of an element
	var buf []byte

	// capture entire browser viewport, returning png with quality=90
	if err := chromedp.Run(ctx, fullScreenshot(`https://baidu.com/`, 90, &buf)); err != nil {
		log.Fatal(err)
	}
	if err := ioutil.WriteFile("fullScreenshot.png", buf, 0644); err != nil {
		log.Fatal(err)
	}
}

// fullScreenshot takes a screenshot of the entire browser viewport.
//
// Liberally copied from puppeteer's source.
//
// Note: this will override the viewport emulation settings.
func fullScreenshot(urlstr string, quality int64, res *[]byte) chromedp.Tasks {
	return chromedp.Tasks{
		chromedp.Navigate(urlstr),
		chromedp.ActionFunc(func(ctx context.Context) error {
			// get layout metrics
			_, _, contentSize, err := page.GetLayoutMetrics().Do(ctx)
			if err != nil {
				return err
			}

			width, height := int64(math.Ceil(contentSize.Width)), int64(math.Ceil(contentSize.Height))

			// force viewport emulation
			err = emulation.SetDeviceMetricsOverride(width, height, 1, true).
				WithScreenOrientation(&emulation.ScreenOrientation{
					Type:  emulation.OrientationTypePortraitPrimary,
					Angle: 0,
				}).
				Do(ctx)
			if err != nil {
				return err
			}

			// capture screenshot
			*res, err = page.CaptureScreenshot().
				WithQuality(quality).
				WithClip(&page.Viewport{
					X:      contentSize.X,
					Y:      contentSize.Y,
					Width:  contentSize.Width,
					Height: contentSize.Height,
					Scale:  1,
				}).Do(ctx)
			if err != nil {
				return err
			}
			return nil
		}),
	}
}

[wpecker]

@r6c
To set as below, may be is ok :
chromedp.Env("TZ="+"Asia/Shanghai"),

[r6c]

@r6c
To set as below, may be is ok :
chromedp.Env("TZ="+"Asia/Shanghai"),

still not work

[wpecker]

@r6c May be you will check if your system has chinese font package installed

[r6c]

i use docker image https://hub.docker.com/r/chromedp/headless-shell/ to run.

@r6c May be you will check if your system has chinese font package installed

[zhengchun]

Install Chinese font package can solve.

RUN apt-get update -y \
    && apt-get install -y fonts-noto \
    && apt-get install -y fonts-noto-cjk

Add the above code into your Dockerfile.

[mvdan]

I assume what @zhengchun said is the solution here. If anyone wants to build an image on top of headless-shell that has more fonts installed, that's always an option.

[ydcool]

Install Chinese font package can solve.

RUN apt-get update -y \
    && apt-get install -y fonts-noto \
    && apt-get install -y fonts-noto-cjk

Add the above code into your Dockerfile.

Don't forget clean up the apt cache after install:

&& apt-get clean && rm -rf /var/lib/apt/lists/* /tmp/* /var/tmp/