agilgur5 / react-signature-canvas

A React wrapper component around signature_pad (in < 150 LoC). Unopinionated and heavily updated fork of react-signature-pad

Home Page:https://agilgur5.github.io/react-signature-canvas/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

Antonyan7 opened this issue · comments

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

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

Thank you, I was create new one with signature_pad

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