search

agilgur5 / react-signature-canvas

A React wrapper component around signature_pad (in < 150 LoC). Unopinionated and heavily updated fork of react-signature-pad
https://agilgur5.github.io/react-signature-canvas/
Other
547 stars 119 forks source link

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

Closed Antonyan7 closed 4 years ago

Antonyan7 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

Thank you, I was create new one with signature_pad

Antonyan7 commented 4 years ago

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