Signature_pad: changing backgroundColor on the fly
Hey,
on initialize I have the signing pad (canvas) set to a specific color but I would like to save it on a transparent or white background. I already used the linked prototype removeBlanks function to capture just the signature but the bg still rgb(255,243,204) i try to change it via
signaturePad.backgroundColor = rgb(255, 255, 255); but it seems like upon signing stroke, the base64 image has already been registered.
Any ideas?
khawye
All 4 comments
Maybe simply swapping colors before sending it to the server would work? You could get raw image data using CanvasContext2D#getImageData(), iterate over every pixel and swap visible background color (8 bit integer) to the desired one. Save modified image data to an offscreen canvas and read it back using Canvas#toDataURL(). Might work :)
BTW. The background color is applied when canvas is cleared, so only on initialize or when you call SignaturePad#clear() explicitly.
szimek
on 19 Nov 2015
@szimek thanks for the response. I was looking to piggy back on the removeBlanks function for this too. I just have to figure out how to tell if it is a background pixel vs a signature pixel.
Also is there a way to get the json array representation of the signature
i.e. {lx : 20, ly : 34, mx : 20, my : 34}
khawye
on 19 Nov 2015
Unfortunately not at the moment. Only the last 4 points are kept in memory, so there's no way to access all points. It might change in the future, but there are some others issues (mainly related to retina/non-retina screens) with higher priority.
You could quite easily change the library to store all points if you really need this data, though.
szimek
on 19 Nov 2015
@khawye If you have any more questions, please reopen this issue.
szimek
on 21 Nov 2015
Related issues
chitgoks
·
5Comments
c2ofh
·
7Comments
erangaapp
·
8Comments
kevinchung1026
·
5Comments
cristhianDt
·
7Comments
Most helpful comment
Maybe simply swapping colors before sending it to the server would work? You could get raw image data using
CanvasContext2D#getImageData(), iterate over every pixel and swap visible background color (8 bit integer) to the desired one. Save modified image data to an offscreen canvas and read it back usingCanvas#toDataURL(). Might work :)BTW. The background color is applied when canvas is cleared, so only on initialize or when you call
SignaturePad#clear()explicitly.