Signature_pad: A imagem é salva com um fundo preto transparente

Criado em 3 mai. 2016 · 4Comentários · Fonte: szimek/signature_pad

Eu defino as propriedades para o bloco de assinatura da seguinte forma:

  signaturePad = new SignaturePad(canvasPad);
  signaturePad.minWidth = 1;
  signaturePad.maxWidth = 1.5;
  signaturePad.dotSize = 3;
  signaturePad.backgroundColor = "rgb(255, 255, 255)";
  signaturePad.penColor = "rgb(66, 133, 244)";

Estou configurando a cor de fundo como branco, mas quando salvei e depois recarreguei, ele apareceu com um fundo preto, tentei salvar como PNG e JPEG, mas com o primeiro o fundo é transparente e o outro recebo um fundo preto. Estou implementando algo errado? Se você precisar de mais código, ficarei feliz em cumprir.

Fonte

auam88

Comentários muito úteis

Depois de fazer alguns testes por conta própria comecei a verificar exemplos que usavam uma cor de fundo, felizmente o Drawing over an image demo que o autor disponibilizou me mostrou a outra forma de instanciar o SignaturePad:

var signaturePad = new SignaturePad(document.getElementById('signature-pad'), {
  backgroundColor: 'rgba(255, 255, 255, 0)',
  penColor: 'rgb(0, 0, 0)'
});

Quando a cor de fundo foi definida assim, ela persistiu em todas as minhas imagens JPEG que desenhei. Se alguém tiver esse tipo de problema, recomendo passar os parâmetros assim ao invés de defini-los depois.

auam88 em 5 mai. 2016

👍4

Todos 4 comentários

var signaturePad = new SignaturePad(document.getElementById('signature-pad'), {
  backgroundColor: 'rgba(255, 255, 255, 0)',
  penColor: 'rgb(0, 0, 0)'
});

auam88 em 5 mai. 2016

👍4

O bug real é: backgroundColor: 'rgb(255,255,255)' ou backgroundColor: 'rgba(255,255,255,0)'
não funcionará e gerará um fundo preto.
Em vez disso, usar: backgroundColor: '#ffffff' funcionará.