Signature_pad: Bug em fromDataURL para dispositivos de tela de alto DPI

Criado em 10 mar. 2016 · 3Comentários · Fonte: szimek/signature_pad

Descrição

Descobri que o método fromDataURL se comporta estranhamente em dispositivos que não têm a proporção de pixel 1, por exemplo, em dispositivos móveis com alto DPI.
Estou ciente da cláusula no README em que o tratamento de telas de alto DPI é discutido.
No entanto, ainda consigo reproduzir um problema usando fromDataURL nos casos em que a tela é de tamanho fixo. Acredito que esse dimensionamento da imagem seja o motivo desse problema.
Você pode reproduzir esse problema usando este JSFiddle .

Passos para reproduzir

Abra o JSFiddled vinculado na descrição acima em um dispositivo que não tenha uma proporção de pixel de 1 e escreva algo no bloco de assinatura.
Clique em Salvar.
Clique em Editar.
Escreva um pouco mais no bloco.
Clique em Cancelar
Resultado esperado

O bloco de assinaturas deve ser exatamente como era após a etapa 2.

Resultado real

As alterações no painel de assinatura são revertidas, mas a imagem foi redimensionada para parecer diferente do que estava no painel após a etapa 2.
3_after_cancel

Fonte

siggifv

👍5

Comentários muito úteis

Oi,

Eu também me deparei com esse problema. Este é um comportamento inesperado. Eu acho que devemos ter uma escolha se queremos essas modificações (então o segundo argumento padronizado para o comportamento anterior deve ser adequado). Principalmente porque algo assim não é feito automaticamente em nenhum outro lugar.

Muito obrigado @siggifv por sua investigação, você me economizou algum tempo.

Preencher a tela manualmente é o caminho por enquanto:

var image = new Image();
signaturePad.clear();
image.src = dataURL;
image.onload = function () {
    signatureCanvas = document.querySelector("#signature-pad");
    signatureCanvas.getContext("2d").drawImage(image, 0, 0, width, height);
};
this.signaturePad._isEmpty = false;

durasj em 17 jun. 2016

👍2 🎉1

Todos 3 comentários

Oi,

Muito obrigado @siggifv por sua investigação, você me economizou algum tempo.

Preencher a tela manualmente é o caminho por enquanto:

var image = new Image();
signaturePad.clear();
image.src = dataURL;
image.onload = function () {
    signatureCanvas = document.querySelector("#signature-pad");
    signatureCanvas.getContext("2d").drawImage(image, 0, 0, width, height);
};
this.signaturePad._isEmpty = false;

durasj em 17 jun. 2016

👍2 🎉1

Oi Durasj,
muito obrigado ... tenho lutado e usado sua solução na minha diretiva angular.

RonB em 3 ago. 2016

Olá @durasj Muito obrigado, funciona perfeitamente

meu exemplo com writeValue do acessador

  writeValue(value: string): void {
    if (!value) {
      this.signaturePad.clear();
      return;
    }
   this.value = value;
   this._drawValueToCanvas();
   this.cdr.markForCheck();
  }

  /** Draw from image according to retina or some devices  */
  _drawValueToCanvas() {
    if (this.canvas != null) {
      const image = new Image();
      this.signaturePad.clear();
      image.src = this.value;
      image.onload = () =>
        this.canvas
          .getContext('2d')
          .drawImage(image, 0, 0, 300, 120);
      this.signaturePad._isEmpty = false;
    }
  }