Black Background on JPG signatures

[PTote]

Hi there!

When i download a jpg signature, the background is complety black. I was reading that is because i need inicializate the signature like this

this.signaturePad = new SignaturePad(canvas, {
backgroundColor: 'rgba(255, 255, 255)',
penColor: 'rgb(0, 0, 0)'
})

But for some reason still dowload with the black background on jpg type. 

I development my project on Angular, anyone can help me ? 

Thanks!

[UziTech]

Can you provide the version of signature_pad that you are using?
Or any code that can reproduce this?

If I had to guess, the issue is that your app is removing the background color at some point. A transparent background will turn black when converted to jpg.

[PTote]

Sure, this is my code. The versión of signature_pad is 4.1.6.

private backgroundColors = {
default: "rgba(0,0,0,0)",
white: "rgb(255,255,255)"
}

@ViewChild('canvas') private canvas!: ElementRef;
private signaturePad!: SignaturePad;

@input() whiteBackground: boolean = false;

ngAfterViewInit() {
this.signaturePadHandler()
}

private signaturePadHandler(): void {

let color = this.backgroundColors.default

if(this.whiteBackground){
  color = this.backgroundColors.white;
}

const canvas = document.getElementById('signature_pad') as HTMLCanvasElement;

if (canvas) {
  this.signaturePad = new SignaturePad(canvas, {
    backgroundColor: color,
    penColor: 'rgb(0, 0, 0)'
  })
}

this.signaturePad.addEventListener("beginStroke", () => {
  this.validateSignaturePadEmpty = false;
  this.signaturePadEmpty.emit(this.validateSignaturePadEmpty);
})

}

public saveSignatureJPG(): void {
const signatureImage = this.signaturePad.toDataURL('image/jpeg');
const a = document.createElement('a');
a.href = signatureImage;
a.download = 'signature.jpg'
a.click();
}

public saveSignaturePNG(): void {
const signatureImage = this.signaturePad.toDataURL();
const a = document.createElement('a');
a.href = signatureImage;
a.download = 'signature.png'
a.click();
}

public saveSignatureSVG(): void {
const signatureImage = this.signaturePad.toDataURL("image/svg+xml");
const a = document.createElement('a');
a.href = signatureImage;
a.download = 'signature.svg'
a.click();
}

[UziTech]

Looks like your default background color is black. If you change the default to white does it work?

[PTote]

Yes, even when I change the background color to white, the background remains black. But, this only happens with the background color; when I change the "penColor" it changes without any kind of problem.

[UziTech]

Can you create a https://jsfiddle.net/ that is reproducing this error. With your code it works for me when I set the default to white.

You can also see an example of it working in our demo when you change the background color.