rebenitez1802 opened a new pull request, #43456:
URL: https://github.com/apache/superset/pull/43456
### SUMMARY
ECharts-rendered charts (which use the **canvas** renderer — e.g.
**Sunburst**, and most modern ECharts charts) export **blurry /
low-resolution** via **"Download as image" / "Export screenshot (png)"**. It's
worst on standard‑DPI (1×) displays and when zooming into the exported PNG.
**Root cause.** `superset-frontend/src/utils/downloadAsImage.tsx` clones the
chart DOM and copies each `<canvas>` **1:1** at its on-screen backing-store
resolution (`preserveCanvasContent`). The PNG path then upscales the whole
layout via `transform: scale(PNG_SCALE = 2)`. Vector/DOM content (SVG, text)
re-rasterizes crisply at 2×, but a `<canvas>` is a bitmap: `dom-to-image-more`
serializes it with `canvas.toDataURL()` and it is simply **stretched** by the
transform. So a canvas chart can never gain detail — the export is capped at
the on-screen canvas resolution (`CSS size × devicePixelRatio`), which on a 1×
display is just the CSS size.
**Fix.** Re-render ECharts-backed canvases at export time instead of
screen-scraping them:
- Recover the live ECharts instance from the canvas's `.echarts-host`
ancestor via `echarts.getInstanceByDom(...)`.
- Replace the cloned canvas with `instance.renderToCanvas({ pixelRatio:
PNG_SCALE, backgroundColor: 'transparent' })` — a true high-resolution
re-render that the PNG path then samples 1:1.
- `echarts` is loaded with a **dynamic `import('echarts/core')`** so it
stays out of the core bundle (charts are lazy plugins).
- Non-ECharts canvases (deck.gl / WebGL) keep the existing 1:1 copy as a
fallback.
- Because `renderToCanvas` flattens all zrender layers into one canvas, each
host is re-rendered **only once** (secondary hover-layer canvases are skipped).
Self-contained change in `downloadAsImage.tsx`; no plugin, API, or config
changes.
### BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF
_Before:_ a downloaded Sunburst PNG is soft and pixelates on zoom.
_After:_ the Sunburst PNG is crisp and stays sharp when zoomed.
(Screenshots to be attached.)
### TESTING INSTRUCTIONS
1. In Explore, build a **Sunburst** chart (e.g. on the "Vehicle Sales"
dataset).
2. Chart context menu → **Download → "Export screenshot (png)"** (solid or
transparent).
3. Open the PNG and zoom in — the chart is now crisp instead of pixelated.
4. Regression: exporting tables (ag-grid), dashboards, and non-ECharts
charts still works.
Unit tests:
```
cd superset-frontend
npm run test -- src/utils/downloadAsImage.test.ts
```
Added tests cover: ECharts canvas re-rendered at `PNG_SCALE` pixel ratio;
non-ECharts canvas kept at on-screen resolution; a host with multiple canvas
layers re-rendered only once.
### ADDITIONAL INFORMATION
- [ ] Has associated issue:
- [ ] Required feature flags:
- [x] Changes UI (improves the resolution of the exported chart image; no
visible control change)
- [ ] Includes DB Migration (follow approval process in
[SIP-59](https://github.com/apache/superset/issues/13351))
- [ ] Migration is atomic, supports rollback & is backwards-compatible
- [ ] Confirm DB migration upgrade and downgrade tested
- [ ] Runtime estimates and downtime expectations provided
- [ ] Introduces new feature or API
- [ ] Removes existing feature or API
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
