Html2canvas: 'рдЕрддрд┐рдкреНрд░рд╡рд╛рд╣: рдСрдЯреЛ' div . рдореЗрдВ рдЫрд┐рдкреЗ рд╣реБрдП рд╣рд┐рд╕реНрд╕реЗ рд╕реЗ рднрд░рд╛ рдХреИрд╕реЗ рдкреНрд░рд╕реНрддреБрдд рдХрд░реЗрдВ

рдХреЛ рдирд┐рд░реНрдорд┐рдд 22 рдлрд╝рд░ре░ 2012  ┬╖  34рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ  ┬╖  рд╕реНрд░реЛрдд: niklasvh/html2canvas

рдореЗрд░реЗ рдкрд╛рд╕ рдПрдХ div рд╣реИ рдЬрд┐рд╕рдореЗрдВ рд╕рднреА рддрддреНрд╡ рд╢рд╛рдорд┐рд▓ рд╣реИрдВ рдЬрд┐рдиреНрд╣реЗрдВ рдПрдХ рдЫрд╡рд┐ рдореЗрдВ рдкрд░рд┐рд╡рд░реНрддрд┐рдд рдХрд┐рдпрд╛ рдЬрд╛рдирд╛ рд╣реИред рдФрд░ рд╡рд╣ рдбрд┐рд╡ ' рдУрд╡рд░рдлреНрд▓реЛ: рдСрдЯреЛ ' рдкрд░ рд╕реЗрдЯ рд╣реИред рдореИрдВ рдЬрд╛рдирдирд╛ рдЪрд╛рд╣рддрд╛ рд╣реВрдВ рдХрд┐ рдореИрдВ рдПрдХ рдЫрд╡рд┐ рдореЗрдВ рд╕рднреА рддрддреНрд╡реЛрдВ (рдпрд╣рд╛рдВ рддрдХ тАЛтАЛтАЛтАЛрдХрд┐ рд╕реНрдХреНрд░реЙрд▓рд┐рдВрдЧ рдореЗрдВ рдЫрд┐рдкреЗ рд╣реБрдП) рдХреЛ рдХреИрд╕реЗ рдирд┐рд░реНрдпрд╛рдд рдХрд░ рд╕рдХрддрд╛ рд╣реВрдВред рдореИрдВ рдЖрдкрдХреА рд╕рднреА рдЯрд┐рдкреНрдкрдгрд┐рдпреЛрдВ рдФрд░ рдЙрддреНрддрд░реЛрдВ рдХреА рд╕рд░рд╛рд╣рдирд╛ рдХрд░рддрд╛ рд╣реВрдВ рдФрд░ рдЙрдирдХрд╛ рд╕реНрд╡рд╛рдЧрдд рдХрд░рддрд╛ рд╣реВрдВ... рдЕрдЧреНрд░рд┐рдо рдзрдиреНрдпрд╡рд╛рдж...

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

@ruthraprakash , рдореЗрд░реЗ рдкрд╛рд╕ рдПрдХ рд╕рдорд╛рди рд╕рдорд╕реНрдпрд╛ рдереАред рдпрд╣ рдирд╡реАрдирддрдо рд╕рдВрд╕реНрдХрд░рдг рдкрд░ рдореЗрд░реЗ рд╕рд░рд▓ рдЙрджреНрджреЗрд╢реНрдпреЛрдВ рдХреЗ рд▓рд┐рдП рдХрд╛рдо рдХрд░рддрд╛ рд╣реИ:

function fullhtml2canvas(el) {
    return new Promise(resolve => {
        html2canvas(el, {
            width: el.scrollWidth,
            height: el.scrollHeight,
        }).then(canvas => {
            resolve(canvas);
        });
    });
}

рд╕рднреА 34 рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

рд╡рд░реНрддрдорд╛рди рдореЗрдВ рдкреГрд╖реНрда рдХреЛ рд╡рд┐рд╢рд┐рд╖реНрдЯ рд╡рд┐рдХрд▓реНрдкреЛрдВ рдХреЗ рд╕рд╛рде рдкреНрд░рд╕реНрддреБрдд рдХрд░рдиреЗ рдХрд╛ рдХреЛрдИ рд╡рд┐рдХрд▓реНрдк рдирд╣реАрдВ рд╣реИ, рдЗрд╕рд▓рд┐рдП рдЬрд┐рд╕ рддрд░рд╣ рд╕реЗ рдЖрдк рдЗрд╕реЗ рдкреНрд░рд╕реНрддреБрдд рдХрд░рдирд╛ рдЪрд╛рд╣рддреЗ рд╣реИрдВ рдЙрд╕реЗ рджреЗрдЦрдиреЗ рдХреЗ рд▓рд┐рдП рдЖрдкрдХреЛ рдкреГрд╖реНрда рдХреЛ рд╕рдВрд╢реЛрдзрд┐рдд рдХрд░рдирд╛ рд╣реЛрдЧрд╛ред

рджреВрд╕рд░реЗ рд╢рдмреНрджреЛрдВ рдореЗрдВ, рдпрджрд┐ рдЖрдк рдКрдБрдЪрд╛рдИ/рдЪреМрдбрд╝рд╛рдИ рдХреА рд╕реАрдорд╛ рдХреЛ рд╣рдЯрд╛рддреЗ рд╣реИрдВ, html2canvas рдЪрд▓рд╛рддреЗ рд╣реИрдВ, рдФрд░ рдлрд┐рд░ рдКрдБрдЪрд╛рдИ/рдЪреМрдбрд╝рд╛рдИ рдХреЛ рдЙрд╕ рдорд╛рди рдкрд░ рд╡рд╛рдкрд╕ рд╕реЗрдЯ рдХрд░рддреЗ рд╣реИрдВ рдЬреЛ рд╡рд╣ рдерд╛, рддреЛ рдЖрдкрдХреЛ рд╡рд╣ рдкреНрд░рд╛рдкреНрдд рдХрд░рдирд╛ рдЪрд╛рд╣рд┐рдП рдЬреЛ рдЖрдк рдЦреЛрдЬ рд░рд╣реЗ рд╣реИрдВред

рдмрд╣реБрдд-рдмрд╣реБрдд рдзрдиреНрдпрд╡рд╛рдж... рдЖрдкрдиреЗ рдЬреЛ рдХрд╣рд╛ рд╣реИ, рдореИрдВ рдХреЛрд╢рд┐рд╢ рдХрд░реВрдВрдЧрд╛...

рдореИрдВрдиреЗ рдмрд╣реБрдд рджреЗрд░ рддрдХ рдХреЛрд╢рд┐рд╢ рдХреА... рд▓реЗрдХрд┐рди рдЗрд╕рд╕реЗ рдмрд╣реБрдд рдкрд░реЗрд╢рд╛рдиреА рд╣реЛрддреА рд╣реИ... рдЖрдкрдиреЗ рдЬреЛ рдХрд╣рд╛ рд╡рд╣ рдореИрдВ рд╣рд╛рд╕рд┐рд▓ рдирд╣реАрдВ рдХрд░ рд╕рдХрд╛ред рдореБрдЭреЗ рдкрддрд╛ рдЪрд▓рд╛ рдХрд┐ рд╕реНрдХреНрд░реЙрд▓рд┐рдВрдЧ рд╣реЛрдиреЗ рдкрд░ рднреА рдпрд╣ 'рдмреЙрдбреА' рд╣реЛрдиреЗ рдкрд░ рдЕрдЪреНрдЫреА рддрд░рд╣ рд╕реЗ рдХрд╛рдо рдХрд░рддрд╛ рд╣реИ ... рдореИрдВ рдЗрд╕реЗ рдПрдХ div рдХреЗ рд▓рд┐рдП рдкреНрд░рд╛рдкреНрдд рдХрд░рдирд╛ рдЪрд╛рд╣рддрд╛ рд╣реВрдВ рдЬрд┐рд╕рдореЗрдВ рд╕реНрдХреНрд░реЙрд▓рд┐рдВрдЧ рд╡рд╛рд▓реЗ рддрддреНрд╡ рд╣реИрдВ ... рдпрджрд┐ рдЖрдк рдЗрд╕ рдореБрджреНрджреЗ рдХреЗ рд╕рд╛рде рдореЗрд░реА рдорджрдж рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ рддреЛ рдпрд╣ рд╣реЛрдЧрд╛ рдореЗрд░реЗ рд▓рд┐рдП рдмрд╣реБрдд рдорджрдж рдХреА... рдореБрдЭреЗ рдЖрдкрдХреА рдЯрд┐рдкреНрдкрдгрд┐рдпреЛрдВ рдХреА рдкреНрд░рддреАрдХреНрд╖рд╛ рд╣реИ...

@niklasvh , рдореЗрд░реЗ рдкрд╛рд╕ рдПрдХ рд╣реА рд╕рдорд╕реНрдпрд╛ рд╣реИ, рдФрд░ рдореЗрд░реЗ рдкрд╛рд╕ рдПрдХрдорд╛рддреНрд░ рдХрд╛рдордХрд╛рдЬ рд╣реИ рдЬреЛ рдХреЙрд▓ рд╕реЗ рдкрд╣рд▓реЗ рд▓рдХреНрд╖реНрдп рддрддреНрд╡ рдХреА рдЪреМрдбрд╝рд╛рдИ рдХреЛ html2canvas (рд╣рдореЗрд╢рд╛ рдПрдХ рд╡рд┐рдХрд▓реНрдк рдирд╣реАрдВ) рддрдХ рдХрдо рдХрд░рдирд╛ рд╣реИ, рдпрд╛ html2canvas рдкрд░ рдХреЙрд▓ рдХрд░рдирд╛ рд╣реИ

http://jsfiddle.net/fMeRC/1/ (рдпрд╣ рд╡рд┐рд╢реЗрд╖ рдЙрджрд╛рд╣рд░рдг рдХреЗрд╡рд▓ рдХреНрд░реЛрдо рдХреЗ рд▓рд┐рдП рдХрд╛рдо рдХрд░рддрд╛ рд╣реИ; рдЕрдиреНрдп рдмреНрд░рд╛рдЙрдЬрд╝рд░реЛрдВ рдореЗрдВ рд╕рдорд╕реНрдпрд╛ рджреЗрдЦрдиреЗ рдХреЗ рд▓рд┐рдП рдЖрдкрдХреЛ рдЪреМрдбрд╝рд╛рдИ рдХреЗ рд╕рд╛рде рдлреАрд▓ рдХрд░рдирд╛ рд╣реЛрдЧрд╛)

рдпрд╣ рдореВрд▓ рд░реВрдк рд╕реЗ рдХреЗрд╡рд▓ рддрдм рд╣реЛрддрд╛ рд╣реИ рдЬрдм рддрддреНрд╡ рдЦрд┐рдбрд╝рдХреА рд╕реЗ рдмрдбрд╝рд╛ рд╣реЛрддрд╛ рд╣реИ рдпрд╛ (document.width - 8) , рдореБрдЭреЗ рдпрдХреАрди рдирд╣реАрдВ рд╣реИ рдХрд┐ рдХрд┐рд╕рдХреЗ рдкрд╛рд╕ рдЕрдзрд┐рдХ рдорд╣рддреНрд╡рдкреВрд░реНрдг/рдкреНрд░рддреНрдпрдХреНрд╖ рдкреНрд░рд╛рд╕рдВрдЧрд┐рдХрддрд╛ рд╣реИ, рдФрд░ рдпрд╣ рдЕрдиреНрдп рдмреНрд░рд╛рдЙрдЬрд╝рд░реЛрдВ рдкрд░ рдмрджрд▓ рд╕рдХрддрд╛ рд╣реИ)ред

рд╢рд╛рдпрдж рд╕рдВрдмрдВрдзрд┐рдд: #199 рдФрд░ # 108ред

рдЪрд╛рдЗрд▓реНрдб рдПрд▓реАрдореЗрдВрдЯ рдХреА рдХреЛрд╢рд┐рд╢ рдХреА рдпрд╛ "рдУрд╡рд░рдлреНрд▓реЛ = рджреГрд╢реНрдпрдорд╛рди" рд╕реЗрдЯ рдХрд┐рдпрд╛ рдФрд░ "рдУрд╡рд░рдлреНрд▓реЛ = рдСрдЯреЛ | рд╣рд┐рдбрди | рдЗрдирд╣реЗрд░рд┐рдЯ" рд╕реЗрдЯ рдХрд┐рдпрд╛?

рд╢реИрд▓реА рдХреЗ рдмрд┐рдирд╛ рдЪрд╛рдЗрд▓реНрдб рдПрд▓реАрдореЗрдВрдЯ, рдХреЗрд╡рд▓ рдЕрддрд┐рдкреНрд░рд╡рд╛рд╣ рдХреЗ рд╕рд╛рде рдбрд┐рд╡ рдХреА рд╕рд╛рдордЧреНрд░реА рдкреНрд░рд╛рдкреНрдд рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП:

<div id="main"><!--// main div -->
<div class="mainContent"><!--// div without style (height: auto, width: auto, margin: 0, padding: 0) -->
...content...
html2canvas([$("#main div.mainContent").get(0)],...)

рд╕реБрдЭрд╛рд╡реЛрдВ рдХреЗ рд▓рд┐рдП рдзрдиреНрдпрд╡рд╛рдж, @brcontainerред рдореИрдВрдиреЗ overflow: visible -> html2canvas( ... ) -> overflow: [old overflow] рджреГрд╖реНрдЯрд┐рдХреЛрдг рдХреА рдХреЛрд╢рд┐рд╢ рдХреА рдереА, рд╣рд╛рд▓рд╛рдВрдХрд┐ рдЫрд┐рдкреА/рдЕрдирдЫреБрдИ/рдЫрд┐рдкреА-рдлрд┐рд░ рд╕реЗ рд╕рд╛рдордЧреНрд░реА рдХрд╛ рдлреНрд▓реИрд╢ рдмрд╣реБрдд рдзреНрдпрд╛рди рджреЗрдиреЗ рдпреЛрдЧреНрдп рдерд╛ (рд╕рдВрднрд╡рддрдГ рдХреНрдпреЛрдВрдХрд┐ рдореЗрд░рд╛ рд▓рдХреНрд╖реНрдп рддрддреНрд╡ рдЕрдкреЗрдХреНрд╖рд╛рдХреГрдд рдЬрдЯрд┐рд▓ рд╣реИ)ред рд╣рд╛рд▓рд╛рдБрдХрд┐ рдореИрдВ рдЕрднреА рд╡рд░реНрдХрдЕрд░рд╛рдЙрдВрдб рдХреЗ рдереЛрдбрд╝реЗ рдЕрдиреБрдХреВрд▓рд┐рдд рд╕рдВрд╕реНрдХрд░рдг рдХреЗ рд╕рд╛рде рдЖрдпрд╛ рд╣реВрдБ рдЬреЛ рдЙрд╕ рд╕рдВрдмрдВрдз рдореЗрдВ рдПрдХ рдлрд░реНрдХ рдкрдбрд╝рддрд╛ рд╣реИ:

html2canvas( targetElement, {
  onpreloaded: function(){ /* set parent overflow to visible */},
  onparsed: function(){  /* reset parent overflow */ },
  // ... onrendered, etc.
});

рдпрд╣ рдУрд╡рд░рдлреНрд▓реЛ рдХреЛ рдХреЗрд╡рд▓ 'рджреГрд╢реНрдпрдорд╛рди' рдкрд░ рд╕реЗрдЯ рдХрд░рддрд╛ рд╣реИ (рдЬреЛ рдореБрдЭреЗ рд▓рдЧрддрд╛ рд╣реИ) рд▓рдХреНрд╖реНрдп рдХреЛ рдареАрдХ рд╕реЗ рдкрд╛рд░реНрд╕ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП h2c рдХреЗ рд▓рд┐рдП рдЖрд╡рд╢реНрдпрдХ рдХрдо рд╕реЗ рдХрдо рд╕рдордп, рдЗрд╕ рдкреНрд░рдХрд╛рд░ рдлреНрд▓реИрд╢ рдХреЛ рд▓рдЧрднрдЧ рдкреВрд░реА рддрд░рд╣ рд╕реЗ рд╕рдорд╛рдкреНрдд рдХрд░ рджреЗрддрд╛ рд╣реИ, рдХрдо рд╕реЗ рдХрдо рдореЗрд░реЗ рдорд╛рдорд▓реЗ рдореЗрдВред рдпрд╛рдиреА, рд╣рдореЗрдВ рдУрд╡рд░рдлрд╝реНрд▓реЛ рдХреЛ рд░реАрд╕реЗрдЯ рдХрд░рдиреЗ/рдлрд┐рд░ рд╕реЗ рдЫрд┐рдкрд╛рдиреЗ рд╕реЗ рдкрд╣рд▓реЗ рдХреИрдирд╡рд╛рд╕ рд░реЗрдВрдбрд░рд┐рдВрдЧ рдЪрд░рдг рдХреЗ рд╕рдорд╛рдкреНрдд рд╣реЛрдиреЗ рддрдХ рдкреНрд░рддреАрдХреНрд╖рд╛ рдХрд░рдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рдирд╣реАрдВ рд╣реИред рдореБрдЭреЗ рдирд╣реАрдВ рдкрддрд╛ рдХрд┐ рдпрд╣ рд╕рдВрд╢реЛрдзрд┐рдд рджреГрд╖реНрдЯрд┐рдХреЛрдг рд╕рднреА рдХреЗ рд▓рд┐рдП рдХрд╛рдо рдХрд░реЗрдЧрд╛, рд▓реЗрдХрд┐рди рдореБрдЭреЗ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рдпрд╣ html2canvas( ... ) рд▓рдЧрд╛рддрд╛рд░ рджреЛ рдмрд╛рд░ рдХреЙрд▓ рдХрд░рдиреЗ рдпрд╛ рд▓рдХреНрд╖реНрдп рд╕рд╛рдордЧреНрд░реА рдХреЛ рд▓рдкреЗрдЯрдиреЗ рдХреЗ рд▓рд┐рдП рдбреАрдУрдПрдо рдореЗрдВ рдЕрддрд┐рд░рд┐рдХреНрдд рд╕рд╛рдорд╛рди рдЬреЛрдбрд╝рдиреЗ рд╕реЗ рдПрдХ рдЕрдЪреНрдЫрд╛ рдХрд╛рдордХрд╛рдЬ рд╣реИред

рдХрд┐рд╕реА рднреА рдорд╛рдорд▓реЗ рдореЗрдВ, рдпрд╣ рдЕрднреА рднреА рдПрдХ рд╡рд╛рд╕реНрддрд╡рд┐рдХ рдмрдЧ рд╣реИ рдЬрд┐рд╕реЗ рдореИрдВ рдареАрдХ рд╕реЗ рджреЗрдЦрдирд╛ рдЪрд╛рд╣рддрд╛ рд╣реВрдВред (рд╡рд┐рд╢реЗрд╖ рд░реВрдк рд╕реЗ рдЪреВрдВрдХрд┐ IE9 рдФрд░ 10 рдореЗрдВ рдореЗрд░реЗ рд▓рд┐рдП рди рддреЛ рд╡рд░реНрдХрдЕрд░рд╛рдЙрдВрдб рд╕рд╣реА рдврдВрдЧ рд╕реЗ рдХрд╛рдо рдХрд░рддрд╛ рд╣реИ, рдХрдо рд╕реЗ рдХрдо - IE11 рдореЗрдВ рдХреЛрд╢рд┐рд╢ рдирд╣реАрдВ рдХреА рдЧрдИ рд╣реИред)

_рдиреЛрдЯ: рдЙрдкрд░реЛрдХреНрдд рд╕рдорд╛рдзрд╛рди рдирд╡реАрдирддрдо рд╕рдВрд╕реНрдХрд░рдг рдХреЗ рд╕рд╛рде рдХрд╛рдо рдирд╣реАрдВ рдХрд░реЗрдЧрд╛ рдЬреЛ рд╡рд░реНрддрдорд╛рди рдореЗрдВ рдорд╛рд╕реНрдЯрд░ рдореЗрдВ рд╣реИред рдореИрдВрдиреЗ рдкрд░реАрдХреНрд╖рдг рдирд╣реАрдВ рдХрд┐рдпрд╛ рд╣реИ, рд▓реЗрдХрд┐рди рдРрд╕рд╛ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рдЖрдкрдХреЛ рдЗрд╕рдХреЗ рдмрдЬрд╛рдп oncloned рд╡рд┐рдХрд▓реНрдк рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реЛрдЧреА, рдФрд░ рдЕрддрд┐рдкреНрд░рд╡рд╛рд╣ рдкреИрд░реЗрдВрдЯ рд░реАрд╕реЗрдЯ рдХреЛ рдЕрдм рдЖрдкрдХреЗ рдХреЙрд▓рдмреИрдХ рдореЗрдВ .then() рдХреЙрд▓ рдХрд┐рдпрд╛ рдЬрд╛рдПрдЧрд╛ред (рдпрд╣ рднреА рд╕рдВрднрд╡ рд╣реЛрдирд╛ рдЪрд╛рд╣рд┐рдП рдХрд┐ рд╡рд┐рд╢реЗрд╖ рд░реВрдк рд╕реЗ рдорд╛рддрд╛-рдкрд┐рддрд╛ рдХреЗ рдЕрддрд┐рдкреНрд░рд╡рд╛рд╣ рдХреЛ рдХреНрд▓реЛрди рдХрд┐рдП рдЧрдП рджрд╕реНрддрд╛рд╡реЗрдЬрд╝ рдХреЗ рдЕрдВрджрд░ рджрд┐рдЦрд╛рдИ рджреЗ рдФрд░ рдХреБрдЫ рднреА рд░реАрд╕реЗрдЯ рдХрд░рдиреЗ рдХреА рдЪрд┐рдВрддрд╛ рди рдХрд░реЗрдВред)_

рдореБрдЭреЗ рд╕рдордЭ рдореЗрдВ рдирд╣реАрдВ рдЖрддрд╛ рдХрд┐ рдЖрдкрдиреЗ рдЗрд╕ рддрд░рд╣ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХреНрдпреЛрдВ рдХрд┐рдпрд╛, рдпрд╣ рдЗрд╕ рддрд░рд╣ рдмреЗрд╣рддрд░ рд╣реЛрдЧрд╛:

function SnapShotDOM(target,call){
    var data = {};

    //use jquery or getComputedStyle|style.overflow
    data.overflow = /*get overflow property*/;
    data.width = /*get width property*/;
    data.height = /*get height property*/;
    data.maxWidth = /*get maxWidth property*/;
    data.maxHeight = /*get maxHeight  property*/;

    target.style.overflow="visible !important";
    target.style.height="auto !important";
    target.style.maxHeight="auto !important";

    html2canvas(target, {
        "onrendered": function(canvas) {
            target.style.overflow = data.overflow;
            target.style.width = data.width;
            target.style.height = data.height;
            target.style.maxWidth = data.maxWidth;
            target.style.maxHeight = data.maxHeight;
            call(canvas);
        }
    });
}

SnapShotDOM(document.body,function(canvas){
    console.log(canvas);
});

рдпрд╛ рдХрдХреНрд╖рд╛ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░реЗрдВ:

<style>
*.html2canvasreset{
    overflow: visible !important;
    width: auto !important;
    height: auto !important;
    max-height: auto !important;
}
</style>
<script>
function SnapShotDOM(target,call){
    var data = target.className;
    target.className += " html2canvasreset";//set className - Jquery: $(target).addClass("html2canvasreset");
    html2canvas(target, {
        "onrendered": function(canvas) {
            target.className = data;//old className - Jquery: $(target).removeClass("html2canvasreset");
            call(canvas);
        }
    });
}

SnapShotDOM(document.body,function(canvas){
    console.log(canvas);
});
</script>

рдХрд╛рд░рдг рдореИрдВ onrendered рдореЗрдВ рдЕрддрд┐рдкреНрд░рд╡рд╛рд╣ рд╕реЗ рд╕рдВрдмрдВрдзрд┐рдд рдХреБрдЫ рднреА рдирд╣реАрдВ рдбрд╛рд▓рддрд╛ рдХреНрдпреЛрдВрдХрд┐ рдкрд╛рд░реНрд╕рд┐рдВрдЧ рдФрд░ рдкреНрд░рддрд┐рдкрд╛рджрди рдХреЗ рдмреАрдЪ рдХрд╛ рд╕рдордп рдзреНрдпрд╛рди рджреЗрдиреЗ рдпреЛрдЧреНрдп рд╣реЛ рд╕рдХрддрд╛ рд╣реИ, рдФрд░ рдЬрд┐рддрдиреА рдЬрд▓реНрджреА рд╣реЛ рд╕рдХреЗ рдЕрддрд┐рдкреНрд░рд╡рд╛рд╣ рдХреЛ рд░реАрд╕реЗрдЯ рдХрд░рдирд╛ (рдпрд╛рдиреА, рдкреНрд░рддрд┐рдкрд╛рджрди рд╕реЗ рдкрд╣рд▓реЗ, рдкрд╛рд░реНрд╕рд┐рдВрдЧ рдХреЗ рдареАрдХ рдмрд╛рдж) рдмреЗрд╣рддрд░ рд╣реИ рд╕рд╛рдордЧреНрд░реА рдХреЗ рджреГрд╢реНрдп рдлреНрд▓реИрд╢ рд╕реЗ рдмрдЪрдиреЗ рдХреЗ рд▓рд┐рдПред рдЗрд╕рдХреЗ рдмрдЬрд╛рдп рдУрд╡рд░рдлреНрд▓реЛ рд░реАрд╕реЗрдЯ рдХреЛ onparsed рдореЗрдВ рдбрд╛рд▓рдиреЗ рд╕реЗ рдпрд╣ рдкреВрд░рд╛ рд╣реЛ рдЬрд╛рддрд╛ рд╣реИред

рдореИрдВ "рдСрдирдкреНрд░реАрд▓реЛрдбреЗрдб" рдХрд╛ рдЬрд┐рдХреНрд░ рдХрд░ рд░рд╣рд╛ рдерд╛ред

рдпреЗ рдХреЛрд╢рд┐рд╢ рдХрд░реЗрдВ:

function SnapShotDOM(target,call){
    var data = target.className;
    target.className += " html2canvasreset";//set className - Jquery: $(target).addClass("html2canvasreset");
    html2canvas(target, {
        "onparsed": function() {
            target.className = data;//old className - Jquery: $(target).removeClass("html2canvasreset");
        },
        "onrendered": function(canvas) {
            call(canvas);
        }
    });
}

SnapShotDOM(document.body,function(canvas){
    console.log(canvas);
});

onpreloaded рдХрд╛ рдореЗрд░рд╛ рдЙрдкрдпреЛрдЧ рдЙрд╕реА рдХрд╛рд░рдг рд╕реЗ рд╣реИ - рдпрд╣ рдПрдХ рдЕрдиреБрдХреВрд▓рди рд╣реИ рдЬреЛ рдореБрдЭреЗ рдкрд╛рд░реНрд╕рд┐рдВрдЧ рдЪрд░рдг рд╕реЗ рдареАрдХ рдкрд╣рд▓реЗ рдЕрддрд┐рдкреНрд░рд╡рд╛рд╣ рдЕрди-рдЫрд┐рдкрд╛рдиреЗ рд╡рд╛рд▓реЗ рд╣рд┐рд╕реНрд╕реЗ рдХреЛ рдирд╡реАрдирддрдо рд╕рдВрднрд╛рд╡рд┐рдд рдХреНрд╖рдг рдореЗрдВ рд╕реНрдерд╛рдирд╛рдВрддрд░рд┐рдд рдХрд░рдиреЗ рдХреА рдЕрдиреБрдорддрд┐ рджреЗрддрд╛ рд╣реИ, рдЗрд╕ рдкреНрд░рдХрд╛рд░ рдЙрд╕ рд╕рдордп рдХреА рдорд╛рддреНрд░рд╛ рдХреЛ рдХрдо рдХрд░рддрд╛ рд╣реИ рдЬрд┐рд╕рдХреЗ рд▓рд┐рдП рд╕рд╛рдордЧреНрд░реА рдкреВрд░реА рддрд░рд╣ рд╕реЗ рд╕реНрдХреНрд░реАрди рдкрд░ рджрд┐рдЦрд╛рдИ рджреЗ рд░рд╣реА рд╣реИред рдЖрдк рдпрд╣рд╛рдВ рдФрд░ рдпрд╣рд╛рдВ рдХреЛрдб рдореЗрдВ рджреЗрдЦ рд╕рдХрддреЗ рд╣реИрдВ рдХрд┐ рдпрд╣ рдХреИрд╕реЗ рдХрд╛рдо рдХрд░рддрд╛ рд╣реИ ред

@niklasvh , рдХреНрдпрд╛ рдпрд╣ рдореБрджреНрджрд╛ рдпрд╣рд╛рдВ рдкрд╛рдП рдЧрдП TODO рд╕реЗ рд╕рдВрдмрдВрдзрд┐рдд options.useOverflow )?

рдЖрдк рд▓реЛрдЧреЛрдВ рдиреЗ рдХрд┐рд╕ рд╕рдВрд╕реНрдХрд░рдг рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд┐рдпрд╛? .. рдореИрдВ рдЕрдкрдиреЗ рд╕рдВрд╕реНрдХрд░рдг рдореЗрдВ рдСрдирдкрд╛рд░реНрд╕ рдФрд░ рдСрдирдкреНрд░реАрд▓реЛрдбреЗрдб рд╡рд┐рдзрд┐ рдвреВрдВрдв рд╕рдХрддрд╛ рд╣реВрдВ ..
рдореИрдВ html2canvas-0.5.0-alpha1 рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░ рд░рд╣рд╛ рд╣реВрдВ

@ejlocop рдпрд╣ рд╕рдорд╕реНрдпрд╛ рд╡рд░реНрд╖реЛрдВ рдкрд╣рд▓реЗ рдкрд┐рдЫрд▓реЗ рд╕рдВрд╕реНрдХрд░рдг рдХреЗ рд▓рд┐рдП рджрд╛рдпрд░ рдХреА рдЧрдИ рдереА рдФрд░ рдЖрдкрдХреЗ рдЙрдкрдпреЛрдЧ рдХреЗ рдорд╛рдорд▓реЗ (# 511) рдХреЗ рд▓рд┐рдП рдкреНрд░рд╛рд╕рдВрдЧрд┐рдХ рдирд╣реАрдВ рд╣реЛ рд╕рдХрддреА рд╣реИред

рдЙрдиреНрд╣реЛрдВрдиреЗ рд╕рдорд╕реНрдпрд╛ рдХрд╛ рд╕рдорд╛рдзрд╛рди рдХрд┐рдпрд╛? рдкреИрд░рд╛ рд╕рдорд╛рдзрд╛рди рдореИрдВ рдЕрдкрдиреЗ рдЧреИрдВрдЯ рдЪрд╛рд░реНрдЯ рдХреЗ рд╕рд╛рде рдХреБрдЫ рдвреВрдВрдв рд░рд╣рд╛ рд╣реВрдВ, рдореБрдЭреЗ рдЖрдкрдХреА рдкреВрд░реА рддрд░рд╣ рд╕реЗ рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реИ ...
overflow

рдХрд╛рдо рдирд╣реАрдВ рдХрд░ рд░рд╣рд╛ред

http://jsfiddle.net/fMeRC/368/

@pkpatels рдХрд╛рдо рдХреНрдпреЛрдВ рдирд╣реАрдВ рдХрд░ рд░рд╣рд╛ рд╣реИ? рдореИрдВрдиреЗ рдЖрдкрдХреА рдмреЗрд▓рд╛ рдЪрд▓рд╛рдИ рдФрд░ рдмрд┐рдирд╛ рдХрд╛рдЯреЗ рд╡рд╛рдХреНрдпреЛрдВ рдХрд╛ рдкреНрд░рддрд┐рдкрд╛рджрди рдХрд┐рдпрд╛ рдЧрдпрд╛ ...
рдореЗрд░реЗ рдкрд╛рд╕ рднреА рдпрд╣ рдореБрджреНрджрд╛ рдерд╛ рдФрд░ рдореЗрд░реЗ рд▓рд┐рдП рдХрд╛рдо рдХрд┐рдпрд╛ рдЧрдпрд╛ рд╕рдорд╛рдзрд╛рди рдЗрд╕рдореЗрдВ рд╕реБрдЭрд╛рдпрд╛ рдЧрдпрд╛ рд╣реИ: #117

@uriklar рдпрд╣ рдХреНрд╖реИрддрд┐рдЬ рд╕реНрдХреНрд░реЙрд▓ рдХреЗ рд▓рд┐рдП рдХрд╛рдо рдХрд░ рд░рд╣рд╛ рд╣реИ рд▓рдВрдмрд╡рдд рдХреЗ рд▓рд┐рдП рдирд╣реАрдВред рдореЗрд░рд╛ рдбрд┐рд╡ рдЪреЗрдХрдЖрдЙрдЯ рдХрд░реЗрдВред рд╡рд╣рд╛рдВ рддреАрди рдЕрд▓рдЧ-рдЕрд▓рдЧ рддрддреНрд╡ рд╣реИрдВред

@uriklar рдЖрдкрдХреЗ рджреНрд╡рд╛рд░рд╛
screen shot 2016-03-16 at 1 41 09 pm

рд░реЗрдВрдбрд░ рдХрд░рдиреЗ рдФрд░ рдЙрд╕рдХреЗ рдмрд╛рдж рд░реАрд╕реЗрдЯ рдХрд░рдиреЗ рд╕реЗ рдкрд╣рд▓реЗ #text div рдХреА рдКрдВрдЪрд╛рдИ рдХреЛ рдСрдЯреЛ рдореЗрдВ рд╕реЗрдЯ рдХрд░рдиреЗ рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ рдХреНрдпрд╛? рд╡рд╣ рдХрд╛рдо рдХрд░реЗрдЧрд╛ред

рдореБрдЭреЗ рдЕрднреА рднреА рд╕рдмрд╕реЗ рд╣рд╛рд▓рд┐рдпрд╛ рд░рд┐рд▓реАрдЬрд╝ (0.5.0-рдмреАрдЯрд╛ 4) рдореЗрдВ рдЕрддрд┐рдкреНрд░рд╡рд╛рд╣ рдХреЗ рд╕рд╛рде рд╕рдорд╕реНрдпрд╛ рд╣реЛ рд░рд╣реА рдереАред рдореИрдВрдиреЗ @usmonster рдХрд╛ рд╡рд░реНрдХрдЕрд░рд╛рдЙрдВрдб рд▓рд┐рдпрд╛ рдФрд░ рдЗрд╕реЗ h2c рдФрд░ рдкреНрд░реЙрдорд┐рд╕ рдореЗрдВ рд╣рд╛рд▓ рдХреЗ рдкрд░рд┐рд╡рд░реНрддрдиреЛрдВ рдХреЗ рд▓рд┐рдП рдЕрдиреБрдХреВрд▓рд┐рдд рдХрд┐рдпрд╛ (рдЬреИрд╕рд╛ рдХрд┐ @usmonster рдХреЗ рдиреЛрдЯ рдореЗрдВ рд╡рд░реНрдгрд┐рдд рд╣реИ):

рдиреЛрдЯ: рдЙрдкрд░реНрдпреБрдХреНрдд рд╕рдорд╛рдзрд╛рди рдирд╡реАрдирддрдо рд╕рдВрд╕реНрдХрд░рдг рдХреЗ рд╕рд╛рде рдХрд╛рдо рдирд╣реАрдВ рдХрд░реЗрдЧрд╛ рдЬреЛ рд╡рд░реНрддрдорд╛рди рдореЗрдВ рдорд╛рд╕реНрдЯрд░ рдореЗрдВ рд╣реИред рдореИрдВрдиреЗ рдкрд░реАрдХреНрд╖рдг рдирд╣реАрдВ рдХрд┐рдпрд╛ рд╣реИ, рд▓реЗрдХрд┐рди рдРрд╕рд╛ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рдЖрдкрдХреЛ рдЗрд╕рдХреЗ рдмрдЬрд╛рдп рдСрдирдХреНрд▓реЛрди рд╡рд┐рдХрд▓реНрдк рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реЛрдЧреА, рдФрд░ рдУрд╡рд░рдлреНрд▓реЛ рдкреИрд░реЗрдВрдЯ рд░реАрд╕реЗрдЯ рдХреЛ рдЕрдм рдЖрдкрдХреЗ рдХреЙрд▓рдмреИрдХ рдореЗрдВ .then() рдкрд░ рдХреЙрд▓ рдХрд┐рдпрд╛ рдЬрд╛рдПрдЧрд╛ред (рдпрд╣ рд╡рд┐рд╢реЗрд╖ рд░реВрдк рд╕реЗ рдХреНрд▓реЛрди рджрд╕реНрддрд╛рд╡реЗрдЬрд╝ рдХреЗ рдЕрдВрджрд░ рдорд╛рддрд╛-рдкрд┐рддрд╛ рдХреЗ рдЕрддрд┐рдкреНрд░рд╡рд╛рд╣ рдХреЛ рджрд┐рдЦрд╛рдирд╛ рд╕рдВрднрд╡ рд╣реЛрдирд╛ рдЪрд╛рд╣рд┐рдП рдФрд░ рдХреБрдЫ рднреА рд░реАрд╕реЗрдЯ рдХрд░рдиреЗ рдХреА рдЪрд┐рдВрддрд╛ рди рдХрд░реЗрдВред)

рдЗрд╕рд▓рд┐рдП рдЕрдкрдиреЗ рд╡реЗрдмрдкреЗрдЬ рдХреЗ рд╡рд╛рд╕реНрддрд╡рд┐рдХ DOM рдХреЛ рдмрджрд▓реЗ рдмрд┐рдирд╛, рдЖрдк onclone рдХреЙрд▓рдмреИрдХ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдХреЗ h2c рджреНрд╡рд╛рд░рд╛ рд░реЗрдВрдбрд░рд┐рдВрдЧ рдХреЗ рд▓рд┐рдП рдЙрдкрдпреЛрдЧ рдХрд┐рдП рдЧрдП рдХреНрд▓реЛрди рджрд╕реНрддрд╛рд╡реЗрдЬрд╝ рдХреЛ рдмрджрд▓ рд╕рдХрддреЗ рд╣реИрдВред рдпрд╣ рд╡рд╛рд╕реНрддрд╡ рдореЗрдВ рдмрд╣реБрдд рдЖрд╕рд╛рди рд╣реИ, рдпрд╣рд╛рдБ рдореЗрд░реА h2c рдХреЙрд▓ рд╣реИ:

var renderingPromise = html2canvas($(item), {
    width: item.clientWidth,
    height: item.clientHeight,
    onclone: function(clone) {
            $(clone).find('.grid-stack-item-content')
                .css('overflow-x', 'auto')
                .css('overflow-y', 'auto');
        return true;
    }
}).then(
    function(c) {/* success */},
    function() {/* fail */}
);

рдореЗрд░реЗ рд▓рд┐рдП рдХрд╛рдо рдХрд░рдиреЗ рд╡рд╛рд▓реА рдПрдХрдорд╛рддреНрд░ рдЪреАрдЬ рдХреИрдирд╡рд╛рд╕ рдХреЛ рдЖрдИрдлреНрд░реЗрдо рдореЗрдВ рдбрд╛рд▓ рд░рд╣реА рдереА, рдЙрд╕рдХреЗ рдЕрдВрджрд░ html2canvas рдХреЛ рдХреЙрд▓ рдХрд░ рд░рд╣реА рдереА, рдХреИрдирд╡рд╛рд╕ рдкрд░ toDataURL() рдХреЛ рдХреЙрд▓ рдХрд░ рд░рд╣реА рдереА, рдФрд░ рдлрд┐рд░ рдЙрд╕ рдЫрд╡рд┐ рдХреЛ рдХреЙрд▓рдмреИрдХ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдХреЗ рд╢реАрд░реНрд╖ рд╡рд┐рдВрдбреЛ рдкрд░ рд╡рд╛рдкрд╕ рднреЗрдЬ рд░рд╣реА рдереАред рдореБрдЭреЗ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рдЖрдк рдХреИрдирд╡рд╛рд╕ рдСрдмреНрдЬреЗрдХреНрдЯ рдХреЛ рд╡рд╛рдкрд╕ рднреА рдкрд╛рд╕ рдХрд░ рд╕рдХрддреЗ рд╣реИрдВред

return renderDocument(node.ownerDocument, options, node.ownerDocument.defaultView.innerWidth, node.ownerDocument.defaultView.innerHeight, index).then(function(canvas) { if (typeof(options.onrendered) === "function") { log("options.onrendered is deprecated, html2canvas returns a Promise containing the canvas"); options.onrendered(canvas); } return canvas; });
рдореЗрдВ рдмрджрд▓реЛ
var width = options.width != null ? options.width : node.ownerDocument.defaultView.innerWidth; var height = options.height != null ? options.height+node.ownerDocument.defaultView.innerHeight : node.ownerDocument.defaultView.innerHeight; return renderDocument(node.ownerDocument, options, width, height, index).then(function (canvas) { if (typeof(options.onrendered) === "function") { log("options.onrendered is deprecated, html2canvas returns a Promise containing the canvas"); options.onrendered(canvas); } return canvas; });

рдпрд╣ рд╕реНрдХреНрд░реАрди рдХреЗ рдЕрддрд┐рдкреНрд░рд╡рд╛рд╣ (рдЪреМрдбрд╝рд╛рдИ рдФрд░ рдКрдВрдЪрд╛рдИ рджреЛрдиреЛрдВ) рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ рдкреНрд░рд╢реНрди рдХреЛ рд╣рд▓ рдХрд░ рд╕рдХрддрд╛ рд╣реИ

xzw123 рдХрд╛ рдПрдХ рдЦрд░рд╛рдм рд╕рдорд╛рдзрд╛рди рд╣реИ: ownerDocument.defaultView.innerHeight рдореИрдиреНрдпреБрдЕрд▓ рд░реВрдк рд╕реЗ рд╕реЗрдЯ рдХрд░рдиреЗ рд╕реЗ рдпрд╣ рд╡рд╛рд╕реНрддрд╡рд┐рдХ рд╡рд┐рдВрдбреЛ рдЖрдХрд╛рд░ рдХреА рдШрдЯрдирд╛рдУрдВ рд╕реЗ рдЕрдирдмрд╛рдЗрдВрдб рд╣реЛ рдЬрд╛рддрд╛ рд╣реИред рдореБрдЭреЗ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рдЗрд╕реЗ рдЖрдИрдлреНрд░реЗрдо рдореЗрдВ рдХрд░рдирд╛ рд╕рдмрд╕реЗ рдЕрдЪреНрдЫрд╛ рд╣реЛрдЧрд╛ред рдореИрдВ рдЬреЙрд░реНрдбрди рдХреЗ рд╕рдорд╛рдзрд╛рди рдХреА рдХреЛрд╢рд┐рд╢ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдЙрддреНрд╕реБрдХ рд╣реВрдВред

рдЬреЙрд░реНрдбрди, рдЖрдкрдиреЗ рдЖрдИрдлреНрд░реЗрдо рдореЗрдВ рдХреИрдирд╡рд╛рд╕ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХреИрд╕реЗ рдХрд┐рдпрд╛? рдореИрдВ рдЗрд╕реЗ рдЕрднреА рдХреЛрд╢рд┐рд╢ рдХрд░ рд░рд╣рд╛ рд╣реВрдВред рдореБрдЭреЗ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рдпрд╣ html2canvas рдореЗрдВ рдЕрдВрддрд┐рдо рд╕рдорд╛рдзрд╛рди рд╣реЛрдирд╛ рдЪрд╛рд╣рд┐рдП ... рдЖрдИрдлреНрд░реЗрдо рд╕рдВрдЪрд╛рд░ рдХреЛ рдПрдкреАрдЖрдИ рдХреЗ рд▓рд┐рдП рдЕрджреГрд╢реНрдп рдмрд╛рд╣рд░реА рдмрдирд╛рдпрд╛ рдЬрд╛рдирд╛ рдЪрд╛рд╣рд┐рдПред

рдЖрд╣ рд╣рд╛рдБ, рдЗрд╕реЗ window.postMessage(myData, ... ) рд╕рд╛рде рдЖрдИрдлреНрд░реЗрдо рдореЗрдВ рдХрд░рдирд╛ рдЪрд╛рд▓ рд╣реИред рдЖрдк рд░реЗрдВрдбрд░ рдХрд┐рдП рдЧрдП рдкрд┐рдХреНрд╕реЗрд▓ рдХрд╛ рд╕рдВрдкреВрд░реНрдг рдбреЗрдЯрд╛ url рд╡рд╛рдкрд╕ рдкреЛрд╕реНрдЯ рдХрд░ рд╕рдХрддреЗ рд╣реИрдВред рдореИрдВрдиреЗ рдЕрдкрдирд╛ рд░реЗрдВрдбрд░рд┐рдВрдЧ рдХреЛрдб iframe рдХреЗ HTML рдореЗрдВ рдбрд╛рд▓рд╛ рд╣реИ, HTML рд╕реНрд░реЛрдд рдХреЛ рд░реЗрдВрдбрд░ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдЖрд╡рд╢реНрдпрдХ рдбреЗрдЯрд╛ рдореЗрдВ рдкрд╛рд╕ рдХрд┐рдпрд╛ рд╣реИ, рдЗрд╕реЗ рдХреИрдирд╡рд╛рд╕ рдкрд░ рд░реЗрдВрдбрд░ рдХрд┐рдпрд╛ рд╣реИ, рдлрд┐рд░ рдЗрд╕реЗ toDataUrl рдбреЗрдЯрд╛ рдХреЛ рд╡рд╛рдкрд╕ рдереВрдХ рджрд┐рдпрд╛ рд╣реИред

+1

рдирдорд╕реНрддреЗред рд╕рдорд╛рдзрд╛рди рдЦреЛрдЬрдиреЗ рдХреЗ рдмрд╛рдж рдФрд░ рдпрд╣ рджреЗрдЦрдиреЗ рдХреЗ рдмрд╛рдж рдХрд┐ рдХреЛрдб рдХреИрд╕реЗ рдЪрд▓рддрд╛ рд╣реИ, рдореИрдВ рдЕрдкрдирд╛ рдЦреБрдж рдХрд╛ рдореБрд╢реНрдХрд┐рд▓ рд╕рдорд╛рдзрд╛рди рд▓рд┐рдЦрддрд╛ рд╣реВрдВред

https://gist.github.com/simonmysun/c6da13ce2827a374e71ccf07d9f08e2d

рдпрд╣ рдореЗрд░реЗ рд▓рд┐рдП рдХрд╛рдо рдХрд░рддрд╛ рд╣реИ рдФрд░ рдореБрдЭреЗ рдЙрдореНрдореАрдж рд╣реИ рдХрд┐ рдпрд╣ рдХрд┐рд╕реА рдРрд╕реЗ рд╡реНрдпрдХреНрддрд┐ рдХреА рдорджрдж рдХрд░реЗрдЧрд╛ рдЬрд┐рд╕реЗ рдЬрд░реВрд░рдд рд╣реИред

рд╣рд╛рд▓рд╛рдВрдХрд┐, рдореБрдЭреЗ рдЕрднреА рднреА рдЙрдореНрдореАрдж рд╣реИ рдХрд┐ рднрд╡рд┐рд╖реНрдп рдореЗрдВ рдЗрд╕ рдкреБрд╕реНрддрдХрд╛рд▓рдп рдореЗрдВ рдЗрд╕рдХрд╛ рд╕рдорд░реНрдерди рдХрд┐рдпрд╛ рдЬрд╛ рд╕рдХрддрд╛ рд╣реИред

рдореБрдЭреЗ рдЕрднреА рднреА рдпрд╣ рдирд╣реАрдВ рдорд┐рд▓рд╛ рд╣реИ, рд▓реЗрдХрд┐рди рдореЗрд░реА рд╕рдорд╕реНрдпрд╛ рдХреЗ рд▓рд┐рдП рдЫрд╡рд┐ рдХрд╛рдЯ рджреА рдЧрдИ рд╣реИред рдХреНрд░реЛрдо рд╕рдВрд╕реНрдХрд░рдг 54.0.2840.99 рд╡рд░реНрдЧ рдореАрдЯрд░ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рддреЗ рд╕рдордп
(рдЖрдзреА рдЫрд╡рд┐ рдХрд╛ рд╕реНрдХреНрд░реАрдирд╢реЙрдЯ рд▓рд┐рдпрд╛ рдЧрдпрд╛, рд▓реЗрдХрд┐рди рджреВрд╕рд░реА рдЖрдзреА рдХреЛ рдХрд╛рд▓реА рд╕реНрдХреНрд░реАрди рдорд┐рд▓реА)

// the timeline show up 100%, but cut off, cause its static and not dynamic.
// (its cut off from the screen,but the size, and picture show as normal, 100% show)
// after moving to the canvas, everthing that not in the screen will get blank in chrome  
// it depends to the user screen, if i zoom out my chrome, i get 100% image.

рд▓реЗрдХрд┐рди рдореЛрдЬрд╝рд┐рд▓рд╛ 50.0.2 рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рддреЗ рд╕рдордп, рдЬрд╝реВрдо рдЖрдЙрдЯ рдХрд┐рдП рдмрд┐рдирд╛ рдпрд╣ рдареАрдХ рдХрд╛рдо рдХрд░рддрд╛ рд╣реИред (100% рдЫрд╡рд┐),

рдореБрдЭреЗ рдирд╣реАрдВ рдкрддрд╛ рдХреНрдпреЛрдВред

рдХреЛрдб:

var zenleft = $("#leftPanel").width();  //calculate left side
var zenright = $(".dataPanel").width();  //calculate right side
var after = zenright + zenleft + 250;  // add all

//add the css, even after add overflow still not working
$("#timelineTarget").css({"background-color":"white","width":after});   

 html2canvas(canvTimeline, {
    onrendered: function (canvas) {
            $("#previewImage").html(canvas);
            getCanvas = canvas;
   }
});

image

рдЕрдВрдд рдореЗрдВ рдореИрдВ рдЗрд╕ рдореБрджреНрджреЗ рдХреЛ рдЬреЛрдбрд╝рдХрд░ рд╣рд▓ рдХрд░рддрд╛ рд╣реВрдВ

$("body").css({"width": "+="+after}); //after is a total of the width of the element i want to view

рдЗрд╕рд▓рд┐рдП

var zenleft = $("#leftPanel").width();  //calculate left side
var zenright = $(".dataPanel").width();  //calculate right side
var after = zenright + zenleft + 250;  // add all
$("body").css({"width": "+="+after});  //add the body

//add the css
$("#timelineTarget").css({"background-color":"white","width":after});   

 html2canvas(canvTimeline, {
    onrendered: function (canvas) {
            $("#previewImage").html(canvas);
            $("#timelineTarget").css({"background-color":"white","width":old});   //turn it back
            $("body").css({"width": "-="+after});   //turn it back
            getCanvas = canvas;
   }
});

рдЖрд╢рд╛ рд╣реИ рдХрд┐ рдпрд╣ рдЖрдкрдХреА рдЕрдкрдиреА рд╕рдорд╕реНрдпрд╛ рдХрд╛ рд╕рдорд╛рдзрд╛рди рдХрд░реЗрдЧрд╛ред

рдСрдирдХреНрд▓реЛрди рд╢рд╛рдпрдж рд╕рд╣реА рддрд░реАрдХрд╛ рд╣реЛред рдЖрдк рдЬреЛ рдЪрд╛рд╣рддреЗ рд╣реИрдВ рдЙрд╕реЗ рдкрд╛рдиреЗ рдХреЗ рд▓рд┐рдП рдЖрдк рд╕реАрдПрд╕рдПрд╕ рдмрджрд▓ рд╕рдХрддреЗ рд╣реИрдВ ....

рд╣рд╛рдп рд╕рдм, рдореЗрд░реЗ рдкрд╛рд╕ div рд╣реИ рдЬреЛ рд╕реНрдХреНрд░реЙрд▓ рдХрд░рдиреЗ рдпреЛрдЧреНрдп рд╣реИред рдЬрдм рдореИрдВ div рдЗрдирдкреБрдЯ рдХреЛ рдХреИрдирд╡рд╛рд╕ рдкреИрд░рд╛рдореАрдЯрд░ рдХреЗ рд░реВрдк рдореЗрдВ рднреЗрдЬрддрд╛ рд╣реВрдВ, рддреЛ рдпрд╣ рдХреЗрд╡рд▓ рд╡реНрдпреВрдкреЛрд░реНрдЯ рдореЗрдВ рдЬреЛ рдЙрдкрд▓рдмреНрдз рд╣реИ рдЙрд╕реЗ рдкреНрд░рд╕реНрддреБрдд рдХрд░рддрд╛ рд╣реИред рдореИрдВ рд╕рднреА рд╕рдорд╛рдзрд╛рдиреЛрдВ рд╕реЗ рдЧреБрдЬрд░рд╛ред рдореБрдЭреЗ рд╕рдордЭ рдирд╣реАрдВ рдЖрдпрд╛ред рдХреНрдпрд╛ рдХреЛрдИ рдмрддрд╛ рд╕рдХрддрд╛ рд╣реИ рдХрд┐ рд╕реНрдХреНрд░реАрдирд╢реЙрдЯ рдХреЗ рд░реВрдк рдореЗрдВ рдкреВрд░реА рд╕рд╛рдордЧреНрд░реА рдХреЛ div рдореЗрдВ рдХреИрд╕реЗ рд▓рд┐рдпрд╛ рдЬрд╛рдПред

@ruthraprakash , рдореЗрд░реЗ рдкрд╛рд╕ рдПрдХ рд╕рдорд╛рди рд╕рдорд╕реНрдпрд╛ рдереАред рдпрд╣ рдирд╡реАрдирддрдо рд╕рдВрд╕реНрдХрд░рдг рдкрд░ рдореЗрд░реЗ рд╕рд░рд▓ рдЙрджреНрджреЗрд╢реНрдпреЛрдВ рдХреЗ рд▓рд┐рдП рдХрд╛рдо рдХрд░рддрд╛ рд╣реИ:

function fullhtml2canvas(el) {
    return new Promise(resolve => {
        html2canvas(el, {
            width: el.scrollWidth,
            height: el.scrollHeight,
        }).then(canvas => {
            resolve(canvas);
        });
    });
}

рдореБрдЭреЗ рдЯрд╛рдЗрдорд▓рд╛рдЗрди рдЪрд╛рд░реНрдЯ рдХрд╛ рд╕реНрдХреНрд░реАрдирд╢реЙрдЯ рд▓реЗрдиреЗ рдореЗрдВ рд╕рдорд╕реНрдпрд╛ рд╣реЛ рд░рд╣реА рд╣реИред рдореБрдЭреЗ рдПрдХреНрд╕ рдЕрдХреНрд╖ рдорд╛рди рдирд╣реАрдВ рдорд┐рд▓ рд░рд╣рд╛ рд╣реИред рдпрд╣ рд╕рд┐рд░реНрдл рд╕рдордпрд░реЗрдЦрд╛ рдЪрд╛рд░реНрдЯ рдХреА рдЫрд╡рд┐ рдмрдирд╛ рд░рд╣рд╛ рд╣реИред
` рдбреЗрдореЛрдлреНрд░реЙрдордПрдЪрдЯреАрдПрдордПрд▓ (рдИ) {
e.preventDefault ();

  let input = window.document.getElementById('divToPDF');


  html2canvas(input)
  .then((canvas) => {

    const imgData = canvas.toDataURL('image/jpeg');

    const pdf = new pdfConverter("l", "pt");
    pdf.addImage(imgData, 'JPEG', 15, 110, 800, 250);
    pdf.save('test.pdf');
  });


}

`

рдореИрдВрдиреЗ рдмрд╣реБрдд рджреЗрд░ рддрдХ рдХреЛрд╢рд┐рд╢ рдХреА... рд▓реЗрдХрд┐рди рдЗрд╕рд╕реЗ рдмрд╣реБрдд рдкрд░реЗрд╢рд╛рдиреА рд╣реЛрддреА рд╣реИ... рдЖрдкрдиреЗ рдЬреЛ рдХрд╣рд╛ рд╡рд╣ рдореИрдВ рд╣рд╛рд╕рд┐рд▓ рдирд╣реАрдВ рдХрд░ рд╕рдХрд╛ред рдореБрдЭреЗ рдкрддрд╛ рдЪрд▓рд╛ рдХрд┐ рд╕реНрдХреНрд░реЙрд▓рд┐рдВрдЧ рд╣реЛрдиреЗ рдкрд░ рднреА рдпрд╣ 'рдмреЙрдбреА' рд╣реЛрдиреЗ рдкрд░ рдЕрдЪреНрдЫреА рддрд░рд╣ рд╕реЗ рдХрд╛рдо рдХрд░рддрд╛ рд╣реИ ... рдореИрдВ рдЗрд╕реЗ рдПрдХ div рдХреЗ рд▓рд┐рдП рдкреНрд░рд╛рдкреНрдд рдХрд░рдирд╛ рдЪрд╛рд╣рддрд╛ рд╣реВрдВ рдЬрд┐рд╕рдореЗрдВ рд╕реНрдХреНрд░реЙрд▓рд┐рдВрдЧ рд╡рд╛рд▓реЗ рддрддреНрд╡ рд╣реИрдВ ... рдпрджрд┐ рдЖрдк рдЗрд╕ рдореБрджреНрджреЗ рдХреЗ рд╕рд╛рде рдореЗрд░реА рдорджрдж рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ рддреЛ рдпрд╣ рд╣реЛрдЧрд╛ рдореЗрд░реЗ рд▓рд┐рдП рдмрд╣реБрдд рдорджрдж рдХреА... рдореБрдЭреЗ рдЖрдкрдХреА рдЯрд┐рдкреНрдкрдгрд┐рдпреЛрдВ рдХреА рдкреНрд░рддреАрдХреНрд╖рд╛ рд╣реИ...

рдХреГрдкрдпрд╛ рдХреНрдпрд╛ рдЖрдк рдореБрдЭреЗ рджрд┐рдЦрд╛ рд╕рдХрддреЗ рд╣реИрдВ рдХрд┐ рдЖрдкрдХреЛ рдХрд╛рдо рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рд╢рд░реАрд░ рдХреИрд╕реЗ рдорд┐рд▓рд╛

рдХреНрдпрд╛ рдпрд╣ рдкреГрд╖реНрда рдЙрдкрдпреЛрдЧреА рдерд╛?
0 / 5 - 0 рд░реЗрдЯрд┐рдВрдЧреНрд╕

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

ghost picture ghost  ┬╖  36рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

Mallander picture Mallander  ┬╖  23рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

mengwuhen picture mengwuhen  ┬╖  29рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

hyojin picture hyojin  ┬╖  24рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

cjcortez picture cjcortez  ┬╖  23рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ