Signature_pad: Utilisation du problème de dimensionnement .fromDataURL()

Créé le 26 nov. 2014 · 8Commentaires · Source: szimek/signature_pad

Salut. Lorsque j'utilise .fromDataURL() pour charger une signature qui a été créée dans le même canevas de taille à l'aide de cette bibliothèque géniale, l'image ne mesure pas correctement et correspond à 1/4 de la taille.

Je ne sais pas s'il s'agit de la bibliothèque ou non, mais je redimensionne le canevas avant de signer à l'origine et avant de charger la signature en mémoire.

Est-ce un problème dans ma logique ou quelqu'un a-t-il déjà vu cela?

Source

MarcGodard

Commentaire le plus utile

Pour faire la même taille d'image, vous pouvez ajouter des options
signaturePad.fromDataURL(data, {width: 100, height: 100})
la largeur, la hauteur doivent être identiques à la taille de la toile
Plus de détails:
https://github.com/szimek/signature_pad/blob/master/src/signature_pad.ts

demo-igor le 26 mars 2018

👍3

Tous les 8 commentaires

Au fait, cela a à voir avec le fait que window.devicePixelRatio n'est pas le même pour une raison quelconque.

Toujours en train d'enquêter, je pense que c'est peut-être un problème avec mon code :(

MarcGodard le 26 nov. 2014

Utilisez-vous la dernière version (1.3.4) ? La 1.3.3 était censée corriger fromDataURL lorsque window.devicePixelRatio est différent de 1, mais cela a été (espérons-le) corrigé dans la 1.3.4.

szimek le 26 nov. 2014

J'utilise la dernière version.

MarcGodard le 26 nov. 2014

Lorsque je fixe correctement le rapport (comme votre démo), mon doigt ne correspond pas à l'endroit où la ligne apparaît.

Je fais juste une simple démo, donc ce n'est pas si important et je jouerai avec plus tard.

MarcGodard le 26 nov. 2014

Voici une démo simple : http://jsfiddle.net/szimek/baL7r8xd. Lorsque vous appuyez sur le bouton "remplacer", il effacera la toile et remettra l'image après 1s. Cela fonctionne bien sur iPhone avec window.devicePixelRatio de 2.

szimek le 26 nov. 2014

Étrange, fonctionne aussi sur mon Android.

Merci, je vais me renseigner :)

MarcGodard le 26 nov. 2014

Pour tous ceux qui rencontrent ce problème, j'ai compris ce que je faisais de mal.

Avant d'insérer les données, en utilisant .fromDataURL(data) , vous devez vous assurer que vous redimensionnez correctement le canevas :

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