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

Need ability to easily export diagram as an image #234

Open
anniexcheng opened this issue Oct 12, 2023 · 0 comments
Open

Need ability to easily export diagram as an image #234

anniexcheng opened this issue Oct 12, 2023 · 0 comments

Comments

@anniexcheng
Copy link

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[] Bug report 
[ ] Performance issue
[x] Feature request
[ ] Documentation issue or request
[ ] Other... Please describe:

Current behavior

We use reaflow in our codebase and want the ability to easily export a diagram/visualization to various image formats (e.g. jpg, png, svg). To my knowledge, there's no current built-in support for this in reaflow.

I've tried using html2canvas, html-to-image, and dom-to-image to export an image from the containerRef in a CanvasRef but they all resulted in empty images or errors.

I've also tried exporting the SVG directly using the svgRef but run into an xlink error:
image

Expected behavior

It would be amazing if there were helper functions that we can call for exporting the diagram in the basic image formats: jpg, png, and svg.

What is the motivation / use case for changing the behavior?

Our users want the ability to export the reaflow diagram/visualization for easy sharing with others. I wasn't able to get the image export behavior working with common frontend libraries and suspect that it might be a much easier fix within reaflow than finding workarounds.

Environment


Libs:
- react version: 18.1.0
- realayers version: X.Y.Z

Browser:
- [x] Chrome (desktop) version 117.0.5938.149
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
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

1 participant