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

getTrimmedCanvas().toDataURL('image/svg+xml') returns data:image/png #49

Closed
Antonyan7 opened this issue May 12, 2020 · 3 comments
Closed
Labels
kind: support Asking for support with something or a specific use case scope: upstream Issue in upstream dependency solution: native canvas behavior This is not a bug and is just how the native canvas element works.

Comments

@Antonyan7
Copy link

Antonyan7 commented May 12, 2020

Hi there, Problem is the return type of signaturePadRef.current.getTrimmedCanvas().toDataURL('image/svg+xml');
may be there are different ways to get SVG from Trimmed Canvas

@agilgur5 agilgur5 changed the title toDataURL('image/svg+xml') also returns data:image/png getTrimmedCanvas().toDataURL('image/svg+xml') returns data:image/png May 13, 2020
@agilgur5 agilgur5 added the scope: upstream Issue in upstream dependency label May 13, 2020
@agilgur5
Copy link
Owner

agilgur5 commented May 13, 2020

So this isn't possible on a native Canvas element -- as far as I know, no browser has support for native 'image/svg+xml'. This seems to be because the Canvas is inherently a raster/bitmap format, and so there is no straightforward conversion.

This is supported when directly using toDataURL on the ref because signature_pad implements it under-the-hood by converting its tracking to SVG.

There might be an existing library to convert Canvas to SVG, but I don't know of one that is up-to-date and functions like you probably want.
The other option would be to trim the SVG directly instead of the Canvas. This probably isn't difficult given that it's a vector format but idk. EDIT: seems to be just a few lines of code

@Antonyan7
Copy link
Author

Thank you, I was create new one with signature_pad

@Antonyan7
Copy link
Author

But i Think browser support for image+xml exists😄😄

@agilgur5 agilgur5 added the solution: native canvas behavior This is not a bug and is just how the native canvas element works. label Mar 13, 2021
@agilgur5 agilgur5 changed the title getTrimmedCanvas().toDataURL('image/svg+xml') returns data:image/png getTrimmedCanvas().toDataURL('image/svg+xml') returns data:image/png Sep 17, 2022
@agilgur5 agilgur5 added the kind: support Asking for support with something or a specific use case label Sep 17, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
kind: support Asking for support with something or a specific use case scope: upstream Issue in upstream dependency solution: native canvas behavior This is not a bug and is just how the native canvas element works.
Projects
None yet
Development

No branches or pull requests

2 participants