html2canvas μ μ΅μ
μ΄μ λ²μ μ μ§μλμ§ μμΌλ©° λ³΄κ³ λ λ¬Έμ λ μ’
λ£λ©λλ€.
μ¬λ¬ divκ° μλ νμ΄μ§κ° μμ΅λλ€. μ΄λ¬ν κ° divμλ μ¬λ¬ λ°μ ν
μ΄λΈ μμκ° μμ΅λλ€. κ° divμ μ€ν¬λ¦°μ·μ μ°μ λ€μ zip νμΌμ λ§λ€κ³ λͺ¨λ νμΌμ ν λ²μ λ€μ΄λ‘λνκ³ μΆμ΅λλ€(μΌμ’
μ μ μ¬ νμν¬μΈνΈ μ¬λΌμ΄λ λ°ν¬). μ΄κ²μ Macμμ μλ²½νκ² μλνμ§λ§ Windowsμμ Google Chromeμ μ¬μ©ν λ μ¬λ¬ λ°μ ν
μ΄λΈμ΄ μλ divλ μ€ν¬λ¦°μ·μ μ°μ λ λ λλ§μ΄ μλ£λμ§ μλ κ² κ°μ΅λλ€. λ λλ§μ΄ ~1000ms μ΄λ΄μ μλ£λλ€λ λ‘κΉ
μ μΌμ νμΈνμ§λ§ html2canvasκ° λ°ννλ canvas
λ λ λλ§μ΄ μλ£λμ§ μμ κ²μ²λΌ λνλ©λλ€. λ°μ ν
μ΄λΈμ λ λλ§λμ§λ§ νμ΄μ§μ λλ¨Έμ§ ν
μ€νΈλ λ‘λκ° λ°μ―€ μλ£λ κ²μ²λΌ λ€μ ν¬λͺ
ν©λλ€.
μμ§ jsfiddle μ¬νμ΄ μμ§λ§ μ¬κΈ°μ μΆκ°νκΈ° μν΄ μμ νκ² μ΅λλ€.
μ΅μ μ μλμ§λ§ μλνλλ‘ ν μ μμ΅λλ€.
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μμ μμ±ν μ΄λ―Έμ§κ° μ리λ κ²κ³Ό λ§€μ° μ μ¬ν λ¬Έμ κ° μμμ΅λλ€. μ΄κ²μ νλ‘λμ λΉλμμλ§ λ°μνμ΅λλ€. κ°λ° νκ²½μμλ μ μλνμ΅λλ€. μμ ν΄κ²° λ°©λ²μ λ΄ λ¬Έμ λ₯Ό ν΄κ²°ν©λλ€. λλ κ·Έκ²μ΄ μ΄μμ μ΄μ§ μμΌλ©° μ΄μ λν μ μ ν μμ μ΄ νμνλ€λ λ° λμνμ§λ§ μ§κΈμ λ΄ λ¬Έμ λ₯Ό ν΄κ²°ν©λλ€. μ΄ ν΄κ²° λ°©λ²μ λν΄
λλ λνμ΄ λ¬Έμ μ λΆλͺμ³€κ³ μ°λ¦¬ μΈ‘μμ κ½€ λμ λ²κ·Έλ₯Ό μΌμΌμΌ°μ΅λλ€. κ³ μ μν©λλ€!
κ°μ₯ μ μ©ν λκΈ
λλ λνμ΄ λ¬Έμ μ λΆλͺμ³€κ³ μ°λ¦¬ μΈ‘μμ κ½€ λμ λ²κ·Έλ₯Ό μΌμΌμΌ°μ΅λλ€. κ³ μ μν©λλ€!