Signature_pad: 높은 DPI ν™”λ©΄ μž₯μΉ˜μ— λŒ€ν•œ fromDataURL 버그

에 λ§Œλ“  2016λ…„ 03μ›” 10일  Β·  3μ½”λ©˜νŠΈ  Β·  좜처: szimek/signature_pad

μ„€λͺ…

fromDataURL λ©”μ„œλ“œκ°€ ν”½μ…€ λΉ„μœ¨μ΄ 1이 μ•„λ‹Œ μž₯치(예: 높은 DPIλ₯Ό 가진 λͺ¨λ°”일 μž₯치)μ—μ„œ μ΄μƒν•˜κ²Œ λ™μž‘ν•œλ‹€λŠ” 것을 λ°œκ²¬ν–ˆμŠ΅λ‹ˆλ‹€.
높은 DPI ν™”λ©΄ μ²˜λ¦¬κ°€ λ…Όμ˜ λ˜λŠ” README 의
κ·ΈλŸ¬λ‚˜ μΊ”λ²„μŠ€κ°€ κ³ μ •λœ 크기인 경우 fromDataURL λ₯Ό μ‚¬μš©ν•˜μ—¬ 문제λ₯Ό μž¬ν˜„ν•  수 μžˆμŠ΅λ‹ˆλ‹€. 이 μ΄λ―Έμ§€μ˜ μŠ€μΌ€μΌλ§ 이 이 문제의 원인이라고 μƒκ°ν•©λ‹ˆλ‹€.
이 JSFiddle 을 μ‚¬μš©ν•˜μ—¬

μž¬ν˜„ 단계

  1. ν”½μ…€ λΉ„μœ¨μ΄ 1이 μ•„λ‹Œ μž₯μΉ˜μ—μ„œ μœ„ μ„€λͺ…에 링크된 JSFiddledλ₯Ό μ—΄κ³  μ„œλͺ… νŒ¨λ“œμ— 무언가λ₯Ό μž‘μ„±ν•˜μ‹­μ‹œμ˜€.
  2. μ €μž₯을 ν΄λ¦­ν•©λ‹ˆλ‹€.
    1_after_save
  3. νŽΈμ§‘μ„ ν΄λ¦­ν•©λ‹ˆλ‹€.
  4. νŒ¨λ“œμ— μ’€ 더 μ“°μ„Έμš”.
    2_before_cancel
  5. μ·¨μ†Œ 클릭

    μ˜ˆμƒλ˜λŠ” κ²°κ³Ό

μ„œλͺ… νŒ¨λ“œλŠ” 2단계 이후와 λ˜‘κ°™μ΄ ν‘œμ‹œλ˜μ–΄μ•Ό ν•©λ‹ˆλ‹€.

μ‹€μ œ κ²°κ³Ό

μ„œλͺ… νŒ¨λ“œμ˜ λ³€κ²½ 사항은 λ˜λŒλ €μ§€μ§€λ§Œ 이미지 크기가 μ‘°μ •λ˜μ–΄ 2단계 이후에 νŒ¨λ“œμ— 있던 것과 λ‹€λ₯΄κ²Œ λ³΄μž…λ‹ˆλ‹€.
3_after_cancel

κ°€μž₯ μœ μš©ν•œ λŒ“κΈ€

μ•ˆλ…•,

λ‚˜λŠ” λ˜ν•œμ΄ 문제λ₯Ό μš°μ—°νžˆ λ°œκ²¬ν–ˆλ‹€. μ΄λŠ” 예기치 μ•Šμ€ λ™μž‘μž…λ‹ˆλ‹€. λ‚˜λŠ” μš°λ¦¬κ°€ κ·ΈλŸ¬ν•œ μˆ˜μ •μ„ μ›ν•˜λŠ”μ§€ μ—¬λΆ€λ₯Ό 선택해야 ν•œλ‹€κ³  μƒκ°ν•©λ‹ˆλ‹€(λ”°λΌμ„œ 두 번째 인수λ₯Ό 이전 λ™μž‘μœΌλ‘œ κΈ°λ³Έ μ„€μ •ν•˜λŠ” 것이 μ’‹μŠ΅λ‹ˆλ‹€). 주둜 그런 일이 λ‹€λ₯Έ κ³³μ—μ„œλŠ” μžλ™μœΌλ‘œ μˆ˜ν–‰λ˜μ§€ μ•ŠκΈ° λ•Œλ¬Έμž…λ‹ˆλ‹€.

@siggifv 쑰사에 κ°μ‚¬λ“œλ¦½λ‹ˆλ‹€. μ‹œκ°„μ„ μ ˆμ•½ν•  수 μžˆμ—ˆμŠ΅λ‹ˆλ‹€.

ν˜„μž¬λ‘œμ„œλŠ” μˆ˜λ™μœΌλ‘œ μΊ”λ²„μŠ€λ₯Ό μ±„μš°λŠ” λ°©λ²•μž…λ‹ˆλ‹€.

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;

λͺ¨λ“  3 λŒ“κΈ€

μ•ˆλ…•,

λ‚˜λŠ” λ˜ν•œμ΄ 문제λ₯Ό μš°μ—°νžˆ λ°œκ²¬ν–ˆλ‹€. μ΄λŠ” 예기치 μ•Šμ€ λ™μž‘μž…λ‹ˆλ‹€. λ‚˜λŠ” μš°λ¦¬κ°€ κ·ΈλŸ¬ν•œ μˆ˜μ •μ„ μ›ν•˜λŠ”μ§€ μ—¬λΆ€λ₯Ό 선택해야 ν•œλ‹€κ³  μƒκ°ν•©λ‹ˆλ‹€(λ”°λΌμ„œ 두 번째 인수λ₯Ό 이전 λ™μž‘μœΌλ‘œ κΈ°λ³Έ μ„€μ •ν•˜λŠ” 것이 μ’‹μŠ΅λ‹ˆλ‹€). 주둜 그런 일이 λ‹€λ₯Έ κ³³μ—μ„œλŠ” μžλ™μœΌλ‘œ μˆ˜ν–‰λ˜μ§€ μ•ŠκΈ° λ•Œλ¬Έμž…λ‹ˆλ‹€.

@siggifv 쑰사에 κ°μ‚¬λ“œλ¦½λ‹ˆλ‹€. μ‹œκ°„μ„ μ ˆμ•½ν•  수 μžˆμ—ˆμŠ΅λ‹ˆλ‹€.

ν˜„μž¬λ‘œμ„œλŠ” μˆ˜λ™μœΌλ‘œ μΊ”λ²„μŠ€λ₯Ό μ±„μš°λŠ” λ°©λ²•μž…λ‹ˆλ‹€.

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λ‹˜,
κ³ λ§ˆμ›Œμš” ... κ³ κ΅°λΆ„νˆ¬ν•˜κ³  λ‚΄ 각도 μ§€μ‹œλ¬Έμ—μ„œ μ†”λ£¨μ…˜μ„ μ‚¬μš©ν–ˆμŠ΅λ‹ˆλ‹€.

μ•ˆλ…•ν•˜μ„Έμš” @durasj κ°μ‚¬ν•©λ‹ˆλ‹€, μ™„λ²½ν•˜κ²Œ μž‘λ™ν•©λ‹ˆλ‹€

μ ‘κ·Όμžμ˜ writeValue λ‚΄ 예

  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;
    }
  }
이 νŽ˜μ΄μ§€κ°€ 도움이 λ˜μ—ˆλ‚˜μš”?
0 / 5 - 0 λ“±κΈ‰

κ΄€λ ¨ 문제

davidosuna1987 picture davidosuna1987  Β·  11μ½”λ©˜νŠΈ

chenks picture chenks  Β·  7μ½”λ©˜νŠΈ

c2ofh picture c2ofh  Β·  7μ½”λ©˜νŠΈ

Sparticuz picture Sparticuz  Β·  7μ½”λ©˜νŠΈ

derUli picture derUli  Β·  3μ½”λ©˜νŠΈ