Signature_pad: .fromDataURL() 크기 조정 문제 사용

Btw, 그것은 window.devicePixelRatio가 어떤 이유로 동일하지 않은 것과 관련이 있습니다.

여전히 조사 중이지만 내 코드에 문제가 있는 것 같습니다.

최신 버전(1.3.4)을 사용하고 있습니까? 1.3.3은 window.devicePixelRatio fromDataURL 를 수정해야 했지만 실제로 1.3.4에서 수정되었습니다.

최신 버전을 사용하고 있습니다.

비율을 적절하게 수정하면(데모처럼) 내 손가락이 선이 표시되는 위치와 일치하지 않습니다.

나는 단지 간단한 데모를 만들고 있으므로 그다지 중요하지 않으며 나중에 더 다룰 것입니다.

다음은 간단한 데모입니다: http://jsfiddle.net/szimek/baL7r8xd. "바꾸기" 버튼을 누르면 캔버스가 지워지고 1초 후에 이미지가 다시 표시됩니다. window.devicePixelRatio 가 2인 iPhone에서는 잘 작동합니다.

이상하게도 내 안드로이드에서도 작동합니다.

고마워, 나는 그것을 알아낼 것이다 :)

이 문제가 발생하는 사람을 위해 내가 뭘 잘못하고 있는지 알아냈습니다.

데이터를 입력하기 전에 .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