Signature_pad: Использование проблемы с размером .fromDataURL()

Кстати, это связано с тем, что window.devicePixelRatio по какой-то причине не совпадает.

Все еще исследую, я думаю, что это может быть проблема с моим кодом :(

Вы используете последнюю версию (1.3.4)? 1.3.3 должен был исправить fromDataURL , когда window.devicePixelRatio отличается от 1, но это было (надеюсь) действительно исправлено в 1.3.4.

Я использую самую новую версию.

Когда я правильно исправляю соотношение (как в вашей демонстрации), мой палец не совпадает с тем местом, где появляется линия.

Я просто делаю простую демонстрацию, так что это не так важно, и я поиграю с ней позже.

Вот простая демонстрация: http://jsfiddle.net/szimek/baL7r8xd. Когда вы нажимаете кнопку «заменить», он очистит холст и вернет изображение через 1 с. Он отлично работает на iPhone с window.devicePixelRatio из 2.

Странно, у меня на андроиде тоже работает.

Спасибо, буду разбираться :)

Для тех, кто случайно столкнулся с этой проблемой, я понял, что я делаю неправильно.

Прежде чем вводить данные с помощью .fromDataURL(data) , необходимо убедиться, что вы правильно масштабируете холст:

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

Чтобы сделать изображение одинакового размера, вы можете добавить параметры
signaturePad.fromDataURL(data, {width: 100, height: 100})
ширина, высота должны быть такими же, как размер холста
Подробнее:
https://github.com/szimek/signature_pad/blob/master/src/signature_pad.ts