Signature_pad: Fehler in fromDataURL für Bildschirmgeräte mit hoher DPI

Erstellt am 10. März 2016 · 3Kommentare · Quelle: szimek/signature_pad

Beschreibung

Ich habe festgestellt, dass sich die Methode fromDataURL auf Geräten, die nicht das Pixelverhältnis 1 haben, seltsam verhält, zB auf mobilen Geräten mit hohem DPI.
Ich kenne die Klausel in der README-Datei, in der die Handhabung von Bildschirmen mit hoher DPI besprochen wird.
Ich kann jedoch immer noch ein Problem mit fromDataURL reproduzieren, wenn die Leinwand eine feste Größe hat. Ich glaube, dass diese Skalierung des Bildes der Grund für dieses Problem ist.
Sie können dieses Problem mit diesem JSFiddle reproduzieren .

Schritte zum Reproduzieren

Öffnen Sie das in der obigen Beschreibung verlinkte JSFiddled auf einem Gerät, das kein Pixelverhältnis
Klicken Sie auf Speichern.
Klicken Sie auf Bearbeiten.
Schreiben Sie noch etwas auf den Block.
Klicken Sie auf Abbrechen
Erwartetes Ergebnis

Das Unterschriftenpad sollte genau so aussehen wie nach Schritt 2.

Tatsächliches Ergebnis

Die Änderungen auf dem Unterschriftenpad werden rückgängig gemacht, aber das Bild wurde so skaliert, dass es anders aussieht als das, was sich nach Schritt 2 auf dem Pad befand.
3_after_cancel

Quelle

siggifv

👍5

Hilfreichster Kommentar

Hallo,

Ich bin auch über dieses Problem gestolpert. Dies ist ein unerwartetes Verhalten. Ich denke, wir sollten die Wahl haben, ob wir solche Modifikationen wollen (also sollte das zweite Argument, das auf das vorherige Verhalten zurückgeht, in Ordnung sein). Vor allem, weil so etwas sonst nirgendwo automatisch gemacht wird.

Vielen Dank @siggifv für deine Recherche, du hast mir etwas Zeit gespart.

Das manuelle Ausfüllen von Canvas ist vorerst der richtige Weg:

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 am 17. Juni 2016

👍2 🎉1

Alle 3 Kommentare

Hallo,

Vielen Dank @siggifv für deine Recherche, du hast mir etwas Zeit gespart.

Das manuelle Ausfüllen von Canvas ist vorerst der richtige Weg:

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 am 17. Juni 2016

👍2 🎉1

Hallo Durasj,
vielen Dank ... habe gekämpft und Ihre Lösung in meiner Winkelrichtlinie verwendet.

RonB am 3. Aug. 2016

Hallo @durasj Vielen Dank, funktioniert einwandfrei

mein Beispiel mit writeValue Accessors

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

djleonskennedy am 10. Dez. 2017

War diese Seite hilfreich?

0 / 5 - 0 Bewertungen