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.

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

无法直接保存为png,或者其它格式的image文件 #35

Closed
tsxylhs opened this issue Sep 5, 2019 · 13 comments
Closed

无法直接保存为png,或者其它格式的image文件 #35

tsxylhs opened this issue Sep 5, 2019 · 13 comments

Comments

@tsxylhs
Copy link

tsxylhs commented Sep 5, 2019

No description provided.

@wlx10011101
Copy link

遇到同样问题,有法解吗?页面上能下载保存,代码里怎么保存呢?

@liyuanhang
Copy link

想保存成 jpg 或者 png,不知道怎么搞

@appleboy
Copy link

appleboy commented Jun 6, 2020

Any plan to save a screenshot?

@chenjiandongx
Copy link
Member

chenjiandongx commented Jun 6, 2020

因为 Echarts 是一个 js 项目,视图效果是通过浏览器渲染的。所以想要把 go-echarts 生成的图下载成 png/jpg 等图片格式的话必须要有一个浏览器的运行时。

类似 https://github.com/puppeteer/puppeteer 或者 https://phantomjs.org 原理就是把生成的 html 文件交由运行时渲染并且执行 js download 方法。

后面可以考虑提供一个插件来做这件事情,不过实际上这种渲染方式的效率还是比较低且耗费资源的。:)

@Hao-Wu
Copy link

Hao-Wu commented Jun 30, 2022

实际上这个需求才是大家找到这个项目的原因。
否则直接在前端用echarts就好了。

@wr6412305
Copy link

这个需求就是使用GO在程序中根据数据生成定制化的图表,我觉得使用配置文件去解析生成图片才是正确的思路,基于JS生成这种前端直接获取数据完成

@Hao-Wu
Copy link

Hao-Wu commented Aug 18, 2022

我先给各位搜索过来的探路了:推荐一个在go后端生成可视化图表的图片文件的项目 https://github.com/gonum/plot

已经用在我得项目中。虽然视觉效果不如echarts这类前端图表,但是生成图片以及数据处理也还算比较方便,达到生产使用程度了。

image

@andersling
Copy link

因为 Echarts 是一个 js 项目,视图效果是通过浏览器渲染的。所以想要把 go-echarts 生成的图下载成 png/jpg 等图片格式的话必须要有一个浏览器的运行时。

类似 https://github.com/puppeteer/puppeteer 或者 https://phantomjs.org 原理就是把生成的 html 文件交由运行时渲染并且执行 js download 方法。

后面可以考虑提供一个插件来做这件事情,不过实际上这种渲染方式的效率还是比较低且耗费资源的。:)

认同这位仁兄的观点:
你可以用chromedp来进行实现:

func save2PNG(file string) {
// get full path of file
abs, _ := filepath.Abs(file)

// create context
ctx, cancel := chromedp.NewContext(
	context.Background(),
	// chromedp.WithDebugf(log.Printf),
)
defer cancel()

// screenshot buffer
var buf []byte

// capture entire browser viewport, returning png with quality=100
task := chromedp.Tasks{
	// use file:// for a local file
	chromedp.Navigate("file://" + abs + ".html"),
	// set resolution for screenshot
	chromedp.EmulateViewport(1200, 800),
	// take screenshot
	chromedp.FullScreenshot(&buf, 100),
}

// run tasks
if err := chromedp.Run(ctx, task); err != nil {
	log.Fatal(err)
}
// write png
if err := ioutil.WriteFile(abs+".png", buf, 0644); err != nil {
	log.Fatal(err)
}

}

不过这个方法就会把生成的go执行程序暴增到15M以上,而且如果服务器很多请求的话,这个方式也可能有很大的内存和CPU压力.

@yqchilde
Copy link

如果可以RenderImage就好了

@chengfeiZhou
Copy link

echarts的渲染依赖dom, 不是能轻易解决的

@CatNum
Copy link

CatNum commented Sep 14, 2023

我先给各位搜索过来的探路了:推荐一个在go后端生成可视化图表的图片文件的项目 https://github.com/gonum/plot

已经用在我得项目中。虽然视觉效果不如echarts这类前端图表,但是生成图片以及数据处理也还算比较方便,达到生产使用程度了。

image

这个不能生成饼图吧

@Hao-Wu
Copy link

Hao-Wu commented Sep 14, 2023

我先给各位搜索过来的探路了:推荐一个在go后端生成可视化图表的图片文件的项目 https://github.com/gonum/plot
已经用在我得项目中。虽然视觉效果不如echarts这类前端图表,但是生成图片以及数据处理也还算比较方便,达到生产使用程度了。
image

这个不能生成饼图吧

有第三方社区实现
https://github.com/benoitmasson/plotters/tree/master/piechart

@Koooooo-7
Copy link
Member

It has been implemented in snapshot-chromedp, plz have a try on it.
And thanks to @andersling who raised this lib out. 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests