Signature_pad: Verwenden von .fromDataURL() Größenproblem

Übrigens hat es damit zu tun, dass window.devicePixelRatio aus irgendeinem Grund nicht gleich ist.

Ich untersuche immer noch, ich denke, es könnte ein Problem mit meinem Code sein :(

Verwenden Sie die neueste Version (1.3.4)? 1.3.3 sollte fromDataURL beheben, wenn window.devicePixelRatio anders als 1 ist, aber es wurde (hoffentlich) tatsächlich in 1.3.4 behoben.

Ich verwende die neuste Version.

Wenn ich das Verhältnis richtig festlege (wie in Ihrer Demo), stimmt mein Finger nicht mit der Stelle überein, an der die Linie angezeigt wird.

Ich mache nur eine einfache Demo, also ist es nicht so wichtig und werde später mehr damit spielen.

Hier ist eine einfache Demo: http://jsfiddle.net/szimek/baL7r8xd. Wenn Sie die Schaltfläche "Ersetzen" drücken, wird die Leinwand gelöscht und das Bild nach 1 Sekunde zurückgesetzt. Es funktioniert gut auf dem iPhone mit window.devicePixelRatio von 2.

Seltsam, funktioniert auch auf meinem Android.

Danke, ich werde es herausfinden :)

Für alle, die zufällig auf dieses Problem stoßen, habe ich herausgefunden, was ich falsch gemacht habe.

Bevor Sie die Daten mit .fromDataURL(data) einfügen, müssen Sie sicherstellen, dass Sie die Leinwand richtig skalieren:

      function resizeCanvas(canvas) {
        var ratio =  window.devicePixelRatio || 1;
        canvas.width = canvas.offsetWidth * ratio;
        canvas.height = canvas.offsetHeight * ratio;
        canvas.getContext('2d').scale(ratio, ratio);
      }

      resizeCanvas(canvas);

Um dieselbe Bildgröße zu erhalten, können Sie Optionen hinzufügen
signaturePad.fromDataURL(data, {width: 100, height: 100})
Breite, Höhe sollte der Leinwandgröße entsprechen
Mehr Details:
https://github.com/szimek/signature_pad/blob/master/src/signature_pad.ts