<p>html2canvas рд╡рд╛рджрд╛ рдкреВрд░рд╛ рд╣реЛрдиреЗ рд╕реЗ рдкрд╣рд▓реЗ рд▓реМрдЯрд╛ рджрд┐рдпрд╛ рдЧрдпрд╛</p>

рдХреЛ рдирд┐рд░реНрдорд┐рдд 1 рдЕрдХреНрддреВре░ 2019  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ  ┬╖  рд╕реНрд░реЛрдд: niklasvh/html2canvas

рдХреГрдкрдпрд╛ рд╕реБрдирд┐рд╢реНрдЪрд┐рдд рдХрд░реЗрдВ рдХрд┐ рдЖрдк html2canvas рдХреА рдирд╡реАрдирддрдо
рдкреБрд░рд╛рдиреЗ рд╕рдВрд╕реНрдХрд░рдг рд╕рдорд░реНрдерд┐рдд рдирд╣реАрдВ рд╣реИрдВ рдФрд░ рдЙрдирдХреЗ рд▓рд┐рдП рд░рд┐рдкреЛрд░реНрдЯ рдХреА рдЧрдИ рд╕рдорд╕реНрдпрд╛рдУрдВ рдХреЛ рдмрдВрдж рдХрд░ рджрд┐рдпрд╛ рдЬрд╛рдПрдЧрд╛ред

рдХреГрдкрдпрд╛ рдкрд╣рд▓реЗ рд╕рд╛рдорд╛рдиреНрдп рд╕рдорд╕реНрдпрд╛ рдирд┐рд╡рд╛рд░рдг рдЪрд░рдгреЛрдВ рдХрд╛ рдкрд╛рд▓рди рдХрд░реЗрдВ:

  • [X] рдЖрдк рдирд╡реАрдирддрдо рд╕рдВрд╕реНрдХрд░рдг рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░ рд░рд╣реЗ рд╣реИрдВ
  • [X] рдЖрдк html2canvas рдХреЗ рдЧреИрд░-рдЫреЛрдЯрд╛ рд╕рдВрд╕реНрдХрд░рдг рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдХреЗ рдкрд░реАрдХреНрд╖рдг рдХрд░ рд░рд╣реЗ рд╣реИрдВ рдФрд░ рдХрдВрд╕реЛрд▓ рдореЗрдВ рд░рд┐рдкреЛрд░реНрдЯ рдХреА рдЧрдИ рдХрд┐рд╕реА рднреА рд╕рдВрднрд╛рд╡рд┐рдд рд╕рдорд╕реНрдпрд╛ рдХреА рдЬрд╛рдБрдЪ рдХрд░ рд░рд╣реЗ рд╣реИрдВ

рджреЛрд╖ рд░рд┐рдкреЛрд░реНрдЯ:

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

рдореЗрд░реЗ рдкрд╛рд╕ рдЕрднреА рддрдХ рдХреЛрдИ jsfiddle рд░реЗрдкреНрд░реЛ рдирд╣реАрдВ рд╣реИ, рд▓реЗрдХрд┐рди рдореИрдВ рдпрд╣рд╛рдВ рдПрдХ рдЬреЛрдбрд╝рдиреЗ рдХреЗ рд▓рд┐рдП рдЙрд╕ рдкрд░ рдХрд╛рдо рдХрд░реВрдВрдЧрд╛ред

рд╡рд┐рд╢реЗрд╖ рд╡рд┐рд╡рд░рдг:

  • html2canvas рд╕рдВрд╕реНрдХрд░рдг рдХреЗ рд╕рд╛рде рдкрд░реАрдХреНрд╖рдг рдХрд┐рдпрд╛ рдЧрдпрд╛:
  • рдмреНрд░рд╛рдЙрдЬрд╝рд░ рдФрд░ рд╕рдВрд╕реНрдХрд░рдг: рдирд╡реАрдирддрдо рдХреНрд░реЛрдо - 77.0.0.3865.90
  • рдСрдкрд░реЗрдЯрд┐рдВрдЧ рд╕рд┐рд╕реНрдЯрдо: рд╡рд┐рдВрдбреЛрдЬрд╝ (рдорд╣рддреНрд╡рдкреВрд░реНрдг, рдореИрдХ рдкрд░ рдкреБрди: рдкреЗрд╢ рдирд╣реАрдВ рдХрд┐рдпрд╛ рдЬрд╛ рд╕рдХрддрд╛)

рд╕рдмрд╕реЗ рдЙрдкрдпреЛрдЧреА рдЯрд┐рдкреНрдкрдгреА

рдореИрдВ рднреА рдЗрд╕ рдореБрджреНрджреЗ рдореЗрдВ рднрд╛рдЧ рдЧрдпрд╛ рдФрд░ рдЗрд╕рдиреЗ рд╣рдорд╛рд░реЗ рдЕрдВрдд рдореЗрдВ рдПрдХ рдмрд╣реБрдд рдЦрд░рд╛рдм рдмрдЧ рдХрд╛ рдХрд╛рд░рдг рдмрдирд╛ред рддрдп рдХрд░рдирд╛ рдЪрд╛рд╣реЗрдВрдЧреЗ!

рд╕рднреА 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 рд░реЗрдЯрд┐рдВрдЧреНрд╕

рд╕рдВрдмрдВрдзрд┐рдд рдореБрджреНрджреЛрдВ

bishwapoudel picture bishwapoudel  ┬╖  4рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

Juliazhong picture Juliazhong  ┬╖  4рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

stevencherry1 picture stevencherry1  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

tibewww picture tibewww  ┬╖  4рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

AlphaDu picture AlphaDu  ┬╖  4рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ