Giters

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

black image returned by `toDataURL('image/jpeg')`

pimmesz opened this issue · comments

commented

Hi,

Currently capturing the content of the signature canvas with signature.toDataURL("image/jpeg", 0.5);. This seems to return a base64. Whenever I try to return with signature.fromDataURL(base64) I get a fully blacked out canvas?

commented

Sorry I'm an idiot! jpeg settings put background there. Should've been signature.toDataURL("image/png", 0.5)

commented

Yep, that'll happen with 'image/jpeg' with the defaults.
I believe this is due to the canvas bitmap being "transparent black" by default according to the Canvas API Spec.
Per the docs here, signature_pad also defaults backgroundColor to 'rgba(0,0,0,0)' AKA transparent black.

JPEGs don't support transparency, so that means "transparent black" just becomes "black". PNGs support transparency, hence the difference.

If you follow these steps:

  1. change the backgroundColor to 'white'
  2. clear() the signature canvas
  3. try toDataURL('image/jpeg') again

Then you'll get a pure white image instead.

commented

@agilgur5 how to change the background color? Im facing the same issue when using jpeg format.

commented

@shivaram549 please read the steps I wrote in my previous comment.