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

[Feature] 想使用worker渲染echarts导出图片 #20527

Open
missile-xuan opened this issue Nov 20, 2024 · 9 comments
Open

[Feature] 想使用worker渲染echarts导出图片 #20527

missile-xuan opened this issue Nov 20, 2024 · 9 comments

Comments

@missile-xuan
Copy link

What problem does this feature solve?

有渲染大量图表且弱交互的场景,想要将渲染和导出通过OffscreenCanvas放在worker中运行,在实际使用中因为work中没有window global 对象导致报错;
image
希望能兼容work的上下文WorkerGlobalScope

或者有没有其他可以直接通过worker渲染的办法?

What does the proposed API look like?

支持在worker中渲染导出

@plainheart
Copy link
Member

这段代码是开发环境用的,没对 global 不存在的情况进行兼容,可以先考虑手动注释掉该部分代码,看看是否后续逻辑仍会存在不兼容 worker 的情况,如有可以继续评论反馈,我们会针对性解决。

@missile-xuan
Copy link
Author

这段代码是开发环境用的,没对 global 不存在的情况进行兼容,可以先考虑手动注释掉该部分代码,看看是否后续逻辑仍会存在不兼容 worker 的情况,如有可以继续评论反馈,我们会针对性解决。

还是不兼容的 因为内部使用了document对象 创建canvas worker中不能使用document

@missile-xuan
Copy link
Author

missile-xuan commented Nov 22, 2024

具体情况是这样的:

/node_modules/zrender/lib/canvas/Layer.js
中调用了platformApi.createCanvas() 这个方法无法通过document创建canvas
image
导致报错
image

@plainheart
Copy link
Member

plainheart commented Nov 22, 2024

想起来 echarts 里部分逻辑没有兼容 worker,考虑用 SVG SSR 试试看。

@plainheart plainheart added this to the TBD milestone Nov 22, 2024
@missile-xuan
Copy link
Author

svg看起来可行 我尝试一下 感谢大佬

想起来 echarts 里部分逻辑没有兼容 worker,考虑用 SVG SSR 试试看。

@missile-xuan
Copy link
Author

jspdf不支持直接插入svg
在worker中无法使用new Image() 导致无法svg->png
看来svg模式行不通

@plainheart
Copy link
Member

plainheart commented Nov 23, 2024

看了下 jspdf 文档 说 addImage 方法支持传入 base64 编码的 data url,zrender 支持把 SVG 转为 data url,示例如下:

// true 代表进行 base64 编码,false 代表 utf8 编码
chart.getZr().painter.toDataURL(true)

也可以试试直接用 utf8 编码的 url 是否能用,如果可用,可以使用这个更简单的 API:

chart.getSvgDataURL()

@missile-xuan
Copy link
Author

missile-xuan commented Nov 23, 2024

看了下 jspdf 文档 说 addImage 方法支持传入 base64 编码的 data url,zrender 支持把 SVG 转为 data url,示例如下:

// true 代表进行 base64 编码,false 代表 utf8 编码
chart.getZr().painter.toDataURL(true)

也可以试试直接用 utf8 编码的 url 是否能用,如果可用,可以使用这个更简单的 API:

chart.getSvgDataURL()

尝试了一下 发现有两个问题
chart.getSvgDataURL()这个方法在worker中并不工作:
image

ui线程中正常:
image

第二是jspdf addImage并不能支持SVG格式
jspdf提供了addSvgAsImage用于导入svg 但是内部使用了Image对象 导致也无法在worker中使用

@missile-xuan
Copy link
Author

看了下 jspdf 文档 说 addImage 方法支持传入 base64 编码的 data url,zrender 支持把 SVG 转为 data url,示例如下:

// true 代表进行 base64 编码,false 代表 utf8 编码
chart.getZr().painter.toDataURL(true)

也可以试试直接用 utf8 编码的 url 是否能用,如果可用,可以使用这个更简单的 API:

chart.getSvgDataURL()

现在想到ui线程开销最小的方案是把svg传回ui线程处理成png 再扔回去渲染pdf 能解决问题 但是比较兜圈子哈哈哈

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

No branches or pull requests

2 participants