From d6f2b812d51a694ff15980c4dd8b27b909a158f2 Mon Sep 17 00:00:00 2001 From: KoyZhuang Date: Tue, 19 Nov 2024 19:10:50 +0800 Subject: [PATCH 1/6] feat: support full page snapshot --- README.md | 20 ++++++++-- asset/bar.html | 1 - asset/bar_content.go | 7 ++++ asset/page.html | 83 +++++++++++++++++++++++++++++++++++++++++ render/chromedp.go | 47 ++++++++++++++++++----- render/chromedp_test.go | 26 +++++++++++++ 6 files changed, 171 insertions(+), 13 deletions(-) create mode 100644 asset/page.html diff --git a/README.md b/README.md index ed2dd36..887f83e 100644 --- a/README.md +++ b/README.md @@ -49,8 +49,10 @@ type SnapshotConfig struct { KeepHtml bool // HtmlPath where to keep the generated html, default same to image path HtmlPath string - // Timeout the timeout config - Timeout time.Duration + // Timeout the timeout config + Timeout time.Duration + // FullPage ONLY enable it when you have multi charts in the single page, better to set larger quality + FullPage bool } ``` @@ -126,7 +128,19 @@ func main() { } ``` -> It only supports single charts for now, multi charts in one `Page` is WIP. +Multi charts in one `Page` is also available now. Please make sure each chart animation disabled. +You can simply enable it for a full page snapshot by: + +```go +render.MakeSnapshot(NewSnapshotConfig(asset.RenderPageContent(), fileImage, func(config *SnapshotConfig) { + // enable the full page snapshot + config.FullPage = true + // higher quality + config.Quality = 100 + }) + +``` + # Special Thanks diff --git a/asset/bar.html b/asset/bar.html index 49fa6dc..8a7d878 100644 --- a/asset/bar.html +++ b/asset/bar.html @@ -4,7 +4,6 @@ Awesome go-echarts - diff --git a/asset/bar_content.go b/asset/bar_content.go index 69ac954..217b561 100644 --- a/asset/bar_content.go +++ b/asset/bar_content.go @@ -7,6 +7,13 @@ import ( //go:embed bar.html var barHTML []byte +//go:embed page.html +var pageHTML []byte + func RenderContent() []byte { return barHTML } + +func RenderPageContent() []byte { + return pageHTML +} diff --git a/asset/page.html b/asset/page.html new file mode 100644 index 0000000..31fe070 --- /dev/null +++ b/asset/page.html @@ -0,0 +1,83 @@ + + + + + Awesome go-echarts + + + + + + + +
+
+
+ + + +
+
+
+ + + + + + diff --git a/render/chromedp.go b/render/chromedp.go index 2eb3dda..cb6c05d 100644 --- a/render/chromedp.go +++ b/render/chromedp.go @@ -40,6 +40,8 @@ type SnapshotConfig struct { HtmlPath string // Timeout the timeout config Timeout time.Duration + // FullPage Only enable it when you have multi charts in the single page, better to set larger quality + FullPage bool } type SnapshotConfigOption func(config *SnapshotConfig) @@ -119,18 +121,16 @@ func MakeSnapshot(config *SnapshotConfig) error { quality = 1 } - var base64Data string + var imgContent []byte executeJS := fmt.Sprintf(CanvasJs, suffix, quality) - err = chromedp.Run(ctx, - chromedp.Navigate(fmt.Sprintf("%s%s", FileProtocol, htmlFullPath)), - chromedp.WaitVisible(EchartsInstanceDom, chromedp.ByQuery), - chromedp.Evaluate(executeJS, &base64Data), - ) - if err != nil { - return err + pagePath := fmt.Sprintf("%s%s", FileProtocol, htmlFullPath) + + if true != config.FullPage { + imgContent, err = querySingleChartElm(ctx, pagePath, executeJS) + } else { + imgContent, err = snapshotFullPage(ctx, pagePath, quality) } - imgContent, err := base64.StdEncoding.DecodeString(strings.Split(base64Data, ",")[1]) if err != nil { return err } @@ -143,3 +143,32 @@ func MakeSnapshot(config *SnapshotConfig) error { log.Printf("Wrote %s.%s success", fileName, suffix) return nil } + +func querySingleChartElm(ctx context.Context, pagePath string, executeJS string) ([]byte, error) { + var base64Data string + var imageContent []byte + err := chromedp.Run(ctx, + chromedp.Navigate(pagePath), + chromedp.WaitVisible(EchartsInstanceDom, chromedp.ByQuery), + chromedp.Evaluate(executeJS, &base64Data), + ) + + if err != nil { + return nil, err + } + imageContent, err = base64.StdEncoding.DecodeString(strings.Split(base64Data, ",")[1]) + return imageContent, err + +} + +func snapshotFullPage(ctx context.Context, pagePath string, quality int) ([]byte, error) { + var imageContent []byte + err := chromedp.Run(ctx, + chromedp.Navigate(pagePath), + chromedp.WaitVisible(EchartsInstanceDom, chromedp.ByQuery), + chromedp.FullScreenshot(&imageContent, quality), + ) + + return imageContent, err + +} diff --git a/render/chromedp_test.go b/render/chromedp_test.go index ce3337f..4df722e 100644 --- a/render/chromedp_test.go +++ b/render/chromedp_test.go @@ -66,3 +66,29 @@ func TestFileCreationWithTimeout(t *testing.T) { t.Fatalf("Can not cancel for creating file with timeout config: %s", fileName) } } + +func TestPageCreation(t *testing.T) { + fileName := "page" + fileImage := fileName + ".png" + fileHtml := fileName + ".html" + + err := MakeSnapshot(NewSnapshotConfig(asset.RenderPageContent(), fileImage, func(config *SnapshotConfig) { + config.FullPage = true + config.Quality = 100 + })) + + if err != nil { + t.Fatalf("Failed to create file: %s", err) + } + + _, err = os.Stat(fileImage) + if os.IsNotExist(err) { + t.Fatalf("Image File was exist") + } + + _, err = os.Stat(fileHtml) + if os.IsExist(err) { + t.Fatalf("Html File was not exist") + } + +} From 2d08bf4d7fd960a06a2344e8eaca828cf0774620 Mon Sep 17 00:00:00 2001 From: Koy Zhuang Date: Tue, 19 Nov 2024 19:16:17 +0800 Subject: [PATCH 2/6] Update README.md --- README.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 887f83e..a0d76dd 100644 --- a/README.md +++ b/README.md @@ -49,10 +49,10 @@ type SnapshotConfig struct { KeepHtml bool // HtmlPath where to keep the generated html, default same to image path HtmlPath string - // Timeout the timeout config - Timeout time.Duration - // FullPage ONLY enable it when you have multi charts in the single page, better to set larger quality - FullPage bool + // Timeout the timeout config + Timeout time.Duration + // FullPage ONLY enable it when you have multi charts in the single page, better to set larger quality + FullPage bool } ``` @@ -133,7 +133,7 @@ You can simply enable it for a full page snapshot by: ```go render.MakeSnapshot(NewSnapshotConfig(asset.RenderPageContent(), fileImage, func(config *SnapshotConfig) { - // enable the full page snapshot + // enable the full page snapshot mode config.FullPage = true // higher quality config.Quality = 100 From 2523ec56668b5557c3d7dcbe4af32aec194a342d Mon Sep 17 00:00:00 2001 From: KoyZhuang Date: Tue, 19 Nov 2024 19:17:51 +0800 Subject: [PATCH 3/6] update: better naming --- README.md | 6 +++--- render/chromedp.go | 14 +++++++------- render/chromedp_test.go | 2 +- 3 files changed, 11 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index a0d76dd..924048a 100644 --- a/README.md +++ b/README.md @@ -51,8 +51,8 @@ type SnapshotConfig struct { HtmlPath string // Timeout the timeout config Timeout time.Duration - // FullPage ONLY enable it when you have multi charts in the single page, better to set larger quality - FullPage bool + // MultiCharts ONLY enable it when you have multi charts in the single page, better to set larger quality + MultiCharts bool } ``` @@ -134,7 +134,7 @@ You can simply enable it for a full page snapshot by: ```go render.MakeSnapshot(NewSnapshotConfig(asset.RenderPageContent(), fileImage, func(config *SnapshotConfig) { // enable the full page snapshot mode - config.FullPage = true + config.MultiCharts = true // higher quality config.Quality = 100 }) diff --git a/render/chromedp.go b/render/chromedp.go index cb6c05d..69a2035 100644 --- a/render/chromedp.go +++ b/render/chromedp.go @@ -40,8 +40,8 @@ type SnapshotConfig struct { HtmlPath string // Timeout the timeout config Timeout time.Duration - // FullPage Only enable it when you have multi charts in the single page, better to set larger quality - FullPage bool + // MultiCharts Only enable it when you have multi charts in the single page, better to set larger quality + MultiCharts bool } type SnapshotConfigOption func(config *SnapshotConfig) @@ -125,10 +125,10 @@ func MakeSnapshot(config *SnapshotConfig) error { executeJS := fmt.Sprintf(CanvasJs, suffix, quality) pagePath := fmt.Sprintf("%s%s", FileProtocol, htmlFullPath) - if true != config.FullPage { - imgContent, err = querySingleChartElm(ctx, pagePath, executeJS) + if true != config.MultiCharts { + imgContent, err = snapshotSingleChart(ctx, pagePath, executeJS) } else { - imgContent, err = snapshotFullPage(ctx, pagePath, quality) + imgContent, err = snapshotMultiCharts(ctx, pagePath, quality) } if err != nil { @@ -144,7 +144,7 @@ func MakeSnapshot(config *SnapshotConfig) error { return nil } -func querySingleChartElm(ctx context.Context, pagePath string, executeJS string) ([]byte, error) { +func snapshotSingleChart(ctx context.Context, pagePath string, executeJS string) ([]byte, error) { var base64Data string var imageContent []byte err := chromedp.Run(ctx, @@ -161,7 +161,7 @@ func querySingleChartElm(ctx context.Context, pagePath string, executeJS string) } -func snapshotFullPage(ctx context.Context, pagePath string, quality int) ([]byte, error) { +func snapshotMultiCharts(ctx context.Context, pagePath string, quality int) ([]byte, error) { var imageContent []byte err := chromedp.Run(ctx, chromedp.Navigate(pagePath), diff --git a/render/chromedp_test.go b/render/chromedp_test.go index 4df722e..1799206 100644 --- a/render/chromedp_test.go +++ b/render/chromedp_test.go @@ -73,7 +73,7 @@ func TestPageCreation(t *testing.T) { fileHtml := fileName + ".html" err := MakeSnapshot(NewSnapshotConfig(asset.RenderPageContent(), fileImage, func(config *SnapshotConfig) { - config.FullPage = true + config.MultiCharts = true config.Quality = 100 })) From 32c2acef14b4cb359936bd9c672dd8b544b658b8 Mon Sep 17 00:00:00 2001 From: KoyZhuang Date: Tue, 19 Nov 2024 19:19:12 +0800 Subject: [PATCH 4/6] update: readme --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 924048a..7eb19f3 100644 --- a/README.md +++ b/README.md @@ -129,11 +129,11 @@ func main() { ``` Multi charts in one `Page` is also available now. Please make sure each chart animation disabled. -You can simply enable it for a full page snapshot by: +You can simply enable it for multi charts snapshot by: ```go render.MakeSnapshot(NewSnapshotConfig(asset.RenderPageContent(), fileImage, func(config *SnapshotConfig) { - // enable the full page snapshot mode + // enable the multi charts within page snapshot mode config.MultiCharts = true // higher quality config.Quality = 100 From 18455acc953b11b0549c735dbf1714ed456df373 Mon Sep 17 00:00:00 2001 From: KoyZhuang Date: Tue, 19 Nov 2024 19:21:21 +0800 Subject: [PATCH 5/6] update: readme --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 7eb19f3..04d6695 100644 --- a/README.md +++ b/README.md @@ -128,7 +128,8 @@ func main() { } ``` -Multi charts in one `Page` is also available now. Please make sure each chart animation disabled. +Snapshot multi charts in one `Page` is also available now. +Please make sure each chart animation disabled. You can simply enable it for multi charts snapshot by: ```go From dae8eaaf817ca4e22323529b1220d4765790e630 Mon Sep 17 00:00:00 2001 From: KoyZhuang Date: Tue, 19 Nov 2024 19:23:08 +0800 Subject: [PATCH 6/6] update: readme --- README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 04d6695..5af78d9 100644 --- a/README.md +++ b/README.md @@ -128,13 +128,13 @@ func main() { } ``` -Snapshot multi charts in one `Page` is also available now. -Please make sure each chart animation disabled. -You can simply enable it for multi charts snapshot by: +Snapshot multi charts in one `Page` is also available now. +Please also make sure each chart animation disabled. +You can simply enable it by: ```go render.MakeSnapshot(NewSnapshotConfig(asset.RenderPageContent(), fileImage, func(config *SnapshotConfig) { - // enable the multi charts within page snapshot mode + // current page contains multi charts config.MultiCharts = true // higher quality config.Quality = 100