Signature_pad: Bug di fromDataURL untuk perangkat layar DPI tinggi

Dibuat pada 10 Mar 2016 · 3Komentar · Sumber: szimek/signature_pad

Keterangan

Saya menemukan bahwa metode fromDataURL berperilaku aneh pada perangkat yang tidak memiliki rasio piksel 1, misalnya pada perangkat seluler dengan DPI tinggi.
Saya mengetahui klausa dalam README di mana penanganan layar DPI tinggi dibahas.
Namun, saya masih dapat mereproduksi masalah menggunakan fromDataURL jika kanvas berukuran tetap. Saya percaya bahwa penskalaan gambar ini adalah alasan untuk masalah ini.
Anda dapat mereproduksi masalah ini menggunakan

Langkah-langkah untuk mereproduksi

Buka JSFiddled yang ditautkan dalam deskripsi di atas pada perangkat yang tidak memiliki rasio piksel 1 dan tulis sesuatu di pad tanda tangan.
Klik Simpan.
Klik Sunting.
Tulis lagi di kertas.
Klik Batal
Hasil yang diharapkan

Papan tanda tangan akan terlihat persis seperti setelah langkah 2.

Hasil sebenarnya

Perubahan pada pad tanda tangan dikembalikan, tetapi gambar telah diskalakan sehingga terlihat berbeda dari apa yang ada di pad setelah langkah 2.
3_after_cancel

Sumber

siggifv

👍5

Komentar yang paling membantu

Hai,

Saya juga tersandung pada masalah ini. Ini adalah perilaku yang tidak terduga. Saya pikir kita harus memiliki pilihan apakah kita menginginkan modifikasi seperti itu (jadi argumen kedua yang default ke perilaku sebelumnya seharusnya baik-baik saja). Terutama karena hal seperti itu tidak dilakukan secara otomatis di tempat lain.

Terima kasih banyak @siggifv atas penyelidikan Anda, Anda menghemat waktu saya.

Mengisi kanvas secara manual adalah caranya untuk saat ini:

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 pada 17 Jun 2016

👍2 🎉1

Semua 3 komentar

Hai,

Terima kasih banyak @siggifv atas penyelidikan Anda, Anda menghemat waktu saya.

Mengisi kanvas secara manual adalah caranya untuk saat ini:

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 pada 17 Jun 2016

👍2 🎉1

Hai Durasj,
terima kasih banyak ... telah berjuang dan menggunakan solusi Anda dalam arahan sudut saya.

RonB pada 3 Agu 2016

Hai @durasj Terima kasih banyak, berfungsi dengan baik

contoh saya dengan writeValue

  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;
    }
  }