рдХреГрдкрдпрд╛ рд╕реБрдирд┐рд╢реНрдЪрд┐рдд рдХрд░реЗрдВ рдХрд┐ рдЖрдк html2canvas рдХреА рдирд╡реАрдирддрдо
рдкреБрд░рд╛рдиреЗ рд╕рдВрд╕реНрдХрд░рдг рд╕рдорд░реНрдерд┐рдд рдирд╣реАрдВ рд╣реИрдВ рдФрд░ рдЙрдирдХреЗ рд▓рд┐рдП рд░рд┐рдкреЛрд░реНрдЯ рдХреА рдЧрдИ рд╕рдорд╕реНрдпрд╛рдУрдВ рдХреЛ рдмрдВрдж рдХрд░ рджрд┐рдпрд╛ рдЬрд╛рдПрдЧрд╛ред
рдореЗрд░реЗ рдкрд╛рд╕ рдХрдИ divs рд╡рд╛рд▓рд╛ рдПрдХ рдкреГрд╖реНрда рд╣реИред рдЗрдирдореЗрдВ рд╕реЗ рдкреНрд░рддреНрдпреЗрдХ div рдореЗрдВ рдХрдИ рдкреНрд░рддрд┐рдХреНрд░рд┐рдпрд╛-рддрд╛рд▓рд┐рдХрд╛ рддрддреНрд╡ рд╣реЛрддреЗ рд╣реИрдВред рдореИрдВ рдкреНрд░рддреНрдпреЗрдХ div рдХрд╛ рдПрдХ рд╕реНрдХреНрд░реАрдирд╢реЙрдЯ рд▓реЗрдирд╛ рдЪрд╛рд╣рддрд╛ рд╣реВрдВ рдФрд░ рдлрд┐рд░ рдПрдХ рдЬрд╝рд┐рдк рдлрд╝рд╛рдЗрд▓ рдмрдирд╛рдирд╛ рдЪрд╛рд╣рддрд╛ рд╣реВрдВ рдФрд░ рдЙрди рд╕рднреА рдХреЛ рдПрдХ рд╕рд╛рде рдбрд╛рдЙрдирд▓реЛрдб рдХрд░рдирд╛ рдЪрд╛рд╣рддрд╛ рд╣реВрдВ (рдПрдХ рдкреНрд░рдХрд╛рд░ рдХрд╛ рдЫрджреНрдо рдкрд╛рд╡рд░рдкреЙрдЗрдВрдЯ рд╕реНрд▓рд╛рдЗрдб рдбреЗрдХ рдХреЗ рд░реВрдк рдореЗрдВ)ред рдпрд╣ рдореИрдХ рдкрд░ рдкреВрд░реА рддрд░рд╣ рд╕реЗ рдХрд╛рдо рдХрд░рддрд╛ рд╣реИ, рд╣рд╛рд▓рд╛рдВрдХрд┐ рдЬрдм рдореИрдВ рд╡рд┐рдВрдбреЛрдЬрд╝ рдкрд░ Google рдХреНрд░реЛрдо рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░ рд░рд╣рд╛ рд╣реВрдВ, рддреЛ рдХрдИ рдкреНрд░рддрд┐рдХреНрд░рд┐рдпрд╛ рддрд╛рд▓рд┐рдХрд╛рдУрдВ рд╡рд╛рд▓реЗ divs рд╕реНрдХреНрд░реАрдирд╢реЙрдЯ рд▓реЗрдиреЗ рдкрд░ рдкреНрд░рддрд┐рдкрд╛рджрди рд╕рдорд╛рдкреНрдд рдирд╣реАрдВ рдХрд░рддреЗ рд╣реИрдВред рдореИрдВрдиреЗ рд▓реЙрдЧрд┐рдВрдЧ рдЪрд╛рд▓реВ рдХрд░рдХреЗ рдкреБрд╖реНрдЯрд┐ рдХреА рд╣реИ рдХрд┐ рд░реЗрдВрдбрд░ ~1000ms рдореЗрдВ рдкреВрд░рд╛ рд╣реЛрддрд╛ рд╣реИ, рд▓реЗрдХрд┐рди canvas
рдЬреЛ html2canvas рд░рд┐рдЯрд░реНрди рдХрд░рддрд╛ рд╣реИ рдРрд╕рд╛ рдкреНрд░рддреАрдд рд╣реЛрддрд╛ рд╣реИ рдЬреИрд╕реЗ рдЙрд╕рдиреЗ рдкреНрд░рддрд┐рдкрд╛рджрди рд╕рдорд╛рдкреНрдд рдирд╣реАрдВ рдХрд┐рдпрд╛ рд╣реИред рдкреНрд░рддрд┐рдХреНрд░рд┐рдпрд╛-рддрд╛рд▓рд┐рдХрд╛рдПрдВ рдкреНрд░рд╕реНрддреБрдд рдХреА рдЬрд╛рддреА рд╣реИрдВ, рд▓реЗрдХрд┐рди рдкреГрд╖реНрда рдкрд░ рд╢реЗрд╖ рдкрд╛рда рдХреБрдЫ рд╣рдж рддрдХ рдкрд╛рд░рджрд░реНрд╢реА рд╣реЛрддрд╛ рд╣реИ, рдЬреИрд╕реЗ рдХрд┐ рдпрд╣ рдЖрдзрд╛ рд▓реЛрдб рд╣реЛ рд░рд╣рд╛ рдерд╛ред
рдореЗрд░реЗ рдкрд╛рд╕ рдЕрднреА рддрдХ рдХреЛрдИ 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 рджреНрд╡рд╛рд░рд╛ рдЙрддреНрдкрдиреНрди рдЫрд╡рд┐рдпреЛрдВ рдХреЛ рдХрд╛рдЯ рджрд┐рдпрд╛ рдЬрд╛ рд░рд╣рд╛ рдерд╛ред рдпрд╣ рдХреЗрд╡рд▓ рдкреНрд░реЛрдбрдХреНрд╢рди рдмрд┐рд▓реНрдб рдореЗрдВ рд╣реБрдЖред рджреЗрд╡ рд╡рд╛рддрд╛рд╡рд░рдг рдореЗрдВ рдЗрд╕рдиреЗ рдареАрдХ рдХрд╛рдо рдХрд┐рдпрд╛ред рдЙрдкрд░реЛрдХреНрдд рдХрд╛рдордХрд╛рдЬ рдореЗрд░реА рд╕рдорд╕реНрдпрд╛ рдХрд╛ рд╕рдорд╛рдзрд╛рди рдХрд░рддрд╛ рд╣реИред рдореИрдВ рд╕рд╣рдордд рд╣реВрдВ рдХрд┐ рдпрд╣ рдЖрджрд░реНрд╢ рдирд╣реАрдВ рд╣реИ, рдФрд░ рдЗрд╕рдХреЗ рд▓рд┐рдП рдПрдХ рдЙрдЪрд┐рдд рд╕реБрдзрд╛рд░ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реИ, рд▓реЗрдХрд┐рди рдЕрднреА рдХреЗ рд▓рд┐рдП рдпрд╣ рдореЗрд░реА рд╕рдорд╕реНрдпрд╛ рдХрд╛ рд╕рдорд╛рдзрд╛рди рдХрд░рддрд╛ рд╣реИред рдЗрд╕ рдХрд╛рдордХрд╛рдЬ рдХреЗ рд▓рд┐рдП рдзрдиреНрдпрд╡рд╛рдж
рдореИрдВ рднреА рдЗрд╕ рдореБрджреНрджреЗ рдореЗрдВ рднрд╛рдЧ рдЧрдпрд╛ рдФрд░ рдЗрд╕рдиреЗ рд╣рдорд╛рд░реЗ рдЕрдВрдд рдореЗрдВ рдПрдХ рдмрд╣реБрдд рдЦрд░рд╛рдм рдмрдЧ рдХрд╛ рдХрд╛рд░рдг рдмрдирд╛ред рддрдп рдХрд░рдирд╛ рдЪрд╛рд╣реЗрдВрдЧреЗ!
рд╕рдмрд╕реЗ рдЙрдкрдпреЛрдЧреА рдЯрд┐рдкреНрдкрдгреА
рдореИрдВ рднреА рдЗрд╕ рдореБрджреНрджреЗ рдореЗрдВ рднрд╛рдЧ рдЧрдпрд╛ рдФрд░ рдЗрд╕рдиреЗ рд╣рдорд╛рд░реЗ рдЕрдВрдд рдореЗрдВ рдПрдХ рдмрд╣реБрдд рдЦрд░рд╛рдм рдмрдЧ рдХрд╛ рдХрд╛рд░рдг рдмрдирд╛ред рддрдп рдХрд░рдирд╛ рдЪрд╛рд╣реЗрдВрдЧреЗ!