<p>λ Œλ”λ§μ΄ μ™„λ£Œλ˜κΈ° 전에 html2canvas 약속이 λ°˜ν™˜λ˜μ—ˆμŠ΅λ‹ˆλ‹€.</p>

에 λ§Œλ“  2019λ…„ 10μ›” 01일  Β·  3μ½”λ©˜νŠΈ  Β·  좜처: niklasvh/html2canvas

html2canvas 의 μ΅œμ‹ 
이전 버전은 μ§€μ›λ˜μ§€ μ•ŠμœΌλ©° 보고된 λ¬Έμ œλŠ” μ’…λ£Œλ©λ‹ˆλ‹€.

λ¨Όμ € 일반적인 문제 ν•΄κ²° 단계λ₯Ό λ”°λ₯΄μ‹­μ‹œμ˜€.

  • [X] μ΅œμ‹  버전을 μ‚¬μš© μ€‘μž…λ‹ˆλ‹€.
  • [X] μΆ•μ†Œλ˜μ§€ μ•Šμ€ λ²„μ „μ˜ html2canvasλ₯Ό μ‚¬μš©ν•˜μ—¬ ν…ŒμŠ€νŠΈ 쀑이며 μ½˜μ†”μ— 보고된 잠재적 문제λ₯Ό ν™•μΈν–ˆμŠ΅λ‹ˆλ‹€.

버그 λ³΄κ³ μ„œ:

μ—¬λŸ¬ divκ°€ μžˆλŠ” νŽ˜μ΄μ§€κ°€ μžˆμŠ΅λ‹ˆλ‹€. μ΄λŸ¬ν•œ 각 divμ—λŠ” μ—¬λŸ¬ λ°˜μ‘ ν…Œμ΄λΈ” μš”μ†Œκ°€ μžˆμŠ΅λ‹ˆλ‹€. 각 div의 μŠ€ν¬λ¦°μƒ·μ„ 찍은 λ‹€μŒ zip νŒŒμΌμ„ λ§Œλ“€κ³  λͺ¨λ“  νŒŒμΌμ„ ν•œ λ²ˆμ— λ‹€μš΄λ‘œλ“œν•˜κ³  μ‹ΆμŠ΅λ‹ˆλ‹€(μΌμ’…μ˜ μœ μ‚¬ νŒŒμ›Œν¬μΈνŠΈ μŠ¬λΌμ΄λ“œ 데크). 이것은 Macμ—μ„œ μ™„λ²½ν•˜κ²Œ μž‘λ™ν•˜μ§€λ§Œ Windowsμ—μ„œ Google Chrome을 μ‚¬μš©ν•  λ•Œ μ—¬λŸ¬ λ°˜μ‘ ν…Œμ΄λΈ”μ΄ μžˆλŠ” divλŠ” μŠ€ν¬λ¦°μƒ·μ„ 찍을 λ•Œ λ Œλ”λ§μ΄ μ™„λ£Œλ˜μ§€ μ•ŠλŠ” 것 κ°™μŠ΅λ‹ˆλ‹€. λ Œλ”λ§μ΄ ~1000ms 이내에 μ™„λ£Œλœλ‹€λŠ” λ‘œκΉ…μ„ μΌœμ„œ ν™•μΈν–ˆμ§€λ§Œ html2canvasκ°€ λ°˜ν™˜ν•˜λŠ” canvas λŠ” λ Œλ”λ§μ΄ μ™„λ£Œλ˜μ§€ μ•Šμ€ κ²ƒμ²˜λŸΌ λ‚˜νƒ€λ‚©λ‹ˆλ‹€. λ°˜μ‘ ν…Œμ΄λΈ”μ€ λ Œλ”λ§λ˜μ§€λ§Œ νŽ˜μ΄μ§€μ˜ λ‚˜λ¨Έμ§€ ν…μŠ€νŠΈλŠ” λ‘œλ“œκ°€ 반쯀 μ™„λ£Œλœ κ²ƒμ²˜λŸΌ λ‹€μ†Œ 투λͺ…ν•©λ‹ˆλ‹€.

아직 jsfiddle μž¬ν˜„μ΄ μ—†μ§€λ§Œ 여기에 μΆ”κ°€ν•˜κΈ° μœ„ν•΄ μž‘μ—…ν•˜κ² μŠ΅λ‹ˆλ‹€.

λͺ…μ„Έμ„œ:

  • λ‹€μŒμœΌλ‘œ ν…ŒμŠ€νŠΈλœ html2canvas 버전:
  • λΈŒλΌμš°μ € 및 버전: μ΅œμ‹  Chrome - 77.0.3865.90
  • 운영 체제: Windows(μ€‘μš”, Macμ—μ„œ μž¬μƒν•  수 μ—†μŒ)

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

λ‚˜λŠ” λ˜ν•œμ΄ λ¬Έμ œμ— λΆ€λ”ͺμ³€κ³  우리 μΈ‘μ—μ„œ κ½€ λ‚˜μœ 버그λ₯Ό μΌμœΌμΌ°μŠ΅λ‹ˆλ‹€. κ³ μ • μ›ν•©λ‹ˆλ‹€!

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

μ΅œμ μ€ μ•„λ‹ˆμ§€λ§Œ μž‘λ™ν•˜λ„λ‘ ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

html2canvas(div, {
    letterRendering: true,
    onclone: (doc) => {
        // onclone logic to resize div

        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve()
            }, 400)
        })
    }
}).then((obj) => {
    let img = obj.toDataURL()
    // save image to zip file
})

μ‹œν–‰ 착였λ₯Ό 톡해 400ms μ‹œκ°„ μ΄ˆκ³Όμ— λ„λ‹¬ν–ˆμŠ΅λ‹ˆλ‹€. 더 적은 것은 html2canvasκ°€ μŠ€ν¬λ¦°μƒ·μ„ 찍을 λ•Œ divκ°€ μ™„μ „νžˆ λ Œλ”λ§λ˜μ§€ μ•ŠλŠ” 문제λ₯Ό κ΄€μ°°ν–ˆμŠ΅λ‹ˆλ‹€.

λ™μ˜ν•©λ‹ˆλ‹€. Html2Canvasμ—μ„œ μƒμ„±ν•œ 이미지가 μž˜λ¦¬λŠ” 것과 맀우 μœ μ‚¬ν•œ λ¬Έμ œκ°€ μžˆμ—ˆμŠ΅λ‹ˆλ‹€. 이것은 ν”„λ‘œλ•μ…˜ λΉŒλ“œμ—μ„œλ§Œ λ°œμƒν–ˆμŠ΅λ‹ˆλ‹€. 개발 ν™˜κ²½μ—μ„œλŠ” 잘 μž‘λ™ν–ˆμŠ΅λ‹ˆλ‹€. μœ„μ˜ ν•΄κ²° 방법은 λ‚΄ 문제λ₯Ό ν•΄κ²°ν•©λ‹ˆλ‹€. λ‚˜λŠ” 그것이 이상적이지 μ•ŠμœΌλ©° 이에 λŒ€ν•œ μ μ ˆν•œ μˆ˜μ •μ΄ ν•„μš”ν•˜λ‹€λŠ” 데 λ™μ˜ν•˜μ§€λ§Œ μ§€κΈˆμ€ λ‚΄ 문제λ₯Ό ν•΄κ²°ν•©λ‹ˆλ‹€. 이 ν•΄κ²° 방법에 λŒ€ν•΄

λ‚˜λŠ” λ˜ν•œμ΄ λ¬Έμ œμ— λΆ€λ”ͺμ³€κ³  우리 μΈ‘μ—μ„œ κ½€ λ‚˜μœ 버그λ₯Ό μΌμœΌμΌ°μŠ΅λ‹ˆλ‹€. κ³ μ • μ›ν•©λ‹ˆλ‹€!

이 νŽ˜μ΄μ§€κ°€ 도움이 λ˜μ—ˆλ‚˜μš”?
0 / 5 - 0 λ“±κΈ‰