рдореЗрд░реЗ рдкрд╛рд╕ рдПрдХ div рд╣реИ рдЬрд┐рд╕рдореЗрдВ рд╕рднреА рддрддреНрд╡ рд╢рд╛рдорд┐рд▓ рд╣реИрдВ рдЬрд┐рдиреНрд╣реЗрдВ рдПрдХ рдЫрд╡рд┐ рдореЗрдВ рдкрд░рд┐рд╡рд░реНрддрд┐рдд рдХрд┐рдпрд╛ рдЬрд╛рдирд╛ рд╣реИред рдФрд░ рд╡рд╣ рдбрд┐рд╡ ' рдУрд╡рд░рдлреНрд▓реЛ: рдСрдЯреЛ ' рдкрд░ рд╕реЗрдЯ рд╣реИред рдореИрдВ рдЬрд╛рдирдирд╛ рдЪрд╛рд╣рддрд╛ рд╣реВрдВ рдХрд┐ рдореИрдВ рдПрдХ рдЫрд╡рд┐ рдореЗрдВ рд╕рднреА рддрддреНрд╡реЛрдВ (рдпрд╣рд╛рдВ рддрдХ тАЛтАЛтАЛтАЛрдХрд┐ рд╕реНрдХреНрд░реЙрд▓рд┐рдВрдЧ рдореЗрдВ рдЫрд┐рдкреЗ рд╣реБрдП) рдХреЛ рдХреИрд╕реЗ рдирд┐рд░реНрдпрд╛рдд рдХрд░ рд╕рдХрддрд╛ рд╣реВрдВред рдореИрдВ рдЖрдкрдХреА рд╕рднреА рдЯрд┐рдкреНрдкрдгрд┐рдпреЛрдВ рдФрд░ рдЙрддреНрддрд░реЛрдВ рдХреА рд╕рд░рд╛рд╣рдирд╛ рдХрд░рддрд╛ рд╣реВрдВ рдФрд░ рдЙрдирдХрд╛ рд╕реНрд╡рд╛рдЧрдд рдХрд░рддрд╛ рд╣реВрдВ... рдЕрдЧреНрд░рд┐рдо рдзрдиреНрдпрд╡рд╛рдж...
рд╡рд░реНрддрдорд╛рди рдореЗрдВ рдкреГрд╖реНрда рдХреЛ рд╡рд┐рд╢рд┐рд╖реНрдЯ рд╡рд┐рдХрд▓реНрдкреЛрдВ рдХреЗ рд╕рд╛рде рдкреНрд░рд╕реНрддреБрдд рдХрд░рдиреЗ рдХрд╛ рдХреЛрдИ рд╡рд┐рдХрд▓реНрдк рдирд╣реАрдВ рд╣реИ, рдЗрд╕рд▓рд┐рдП рдЬрд┐рд╕ рддрд░рд╣ рд╕реЗ рдЖрдк рдЗрд╕реЗ рдкреНрд░рд╕реНрддреБрдд рдХрд░рдирд╛ рдЪрд╛рд╣рддреЗ рд╣реИрдВ рдЙрд╕реЗ рджреЗрдЦрдиреЗ рдХреЗ рд▓рд┐рдП рдЖрдкрдХреЛ рдкреГрд╖реНрда рдХреЛ рд╕рдВрд╢реЛрдзрд┐рдд рдХрд░рдирд╛ рд╣реЛрдЧрд╛ред
рджреВрд╕рд░реЗ рд╢рдмреНрджреЛрдВ рдореЗрдВ, рдпрджрд┐ рдЖрдк рдКрдБрдЪрд╛рдИ/рдЪреМрдбрд╝рд╛рдИ рдХреА рд╕реАрдорд╛ рдХреЛ рд╣рдЯрд╛рддреЗ рд╣реИрдВ, 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) рдХреЗ рд▓рд┐рдП рдкреНрд░рд╛рд╕рдВрдЧрд┐рдХ рдирд╣реАрдВ рд╣реЛ рд╕рдХрддреА рд╣реИред
рдЙрдиреНрд╣реЛрдВрдиреЗ рд╕рдорд╕реНрдпрд╛ рдХрд╛ рд╕рдорд╛рдзрд╛рди рдХрд┐рдпрд╛? рдкреИрд░рд╛ рд╕рдорд╛рдзрд╛рди рдореИрдВ рдЕрдкрдиреЗ рдЧреИрдВрдЯ рдЪрд╛рд░реНрдЯ рдХреЗ рд╕рд╛рде рдХреБрдЫ рдвреВрдВрдв рд░рд╣рд╛ рд╣реВрдВ, рдореБрдЭреЗ рдЖрдкрдХреА рдкреВрд░реА рддрд░рд╣ рд╕реЗ рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реИ ...
рдХрд╛рдо рдирд╣реАрдВ рдХрд░ рд░рд╣рд╛ред
@pkpatels рдХрд╛рдо рдХреНрдпреЛрдВ рдирд╣реАрдВ рдХрд░ рд░рд╣рд╛ рд╣реИ? рдореИрдВрдиреЗ рдЖрдкрдХреА рдмреЗрд▓рд╛ рдЪрд▓рд╛рдИ рдФрд░ рдмрд┐рдирд╛ рдХрд╛рдЯреЗ рд╡рд╛рдХреНрдпреЛрдВ рдХрд╛ рдкреНрд░рддрд┐рдкрд╛рджрди рдХрд┐рдпрд╛ рдЧрдпрд╛ ...
рдореЗрд░реЗ рдкрд╛рд╕ рднреА рдпрд╣ рдореБрджреНрджрд╛ рдерд╛ рдФрд░ рдореЗрд░реЗ рд▓рд┐рдП рдХрд╛рдо рдХрд┐рдпрд╛ рдЧрдпрд╛ рд╕рдорд╛рдзрд╛рди рдЗрд╕рдореЗрдВ рд╕реБрдЭрд╛рдпрд╛ рдЧрдпрд╛ рд╣реИ: #117
@uriklar рдпрд╣ рдХреНрд╖реИрддрд┐рдЬ рд╕реНрдХреНрд░реЙрд▓ рдХреЗ рд▓рд┐рдП рдХрд╛рдо рдХрд░ рд░рд╣рд╛ рд╣реИ рд▓рдВрдмрд╡рдд рдХреЗ рд▓рд┐рдП рдирд╣реАрдВред рдореЗрд░рд╛ рдбрд┐рд╡ рдЪреЗрдХрдЖрдЙрдЯ рдХрд░реЗрдВред рд╡рд╣рд╛рдВ рддреАрди рдЕрд▓рдЧ-рдЕрд▓рдЧ рддрддреНрд╡ рд╣реИрдВред
@uriklar рдЖрдкрдХреЗ рджреНрд╡рд╛рд░рд╛
рд░реЗрдВрдбрд░ рдХрд░рдиреЗ рдФрд░ рдЙрд╕рдХреЗ рдмрд╛рдж рд░реАрд╕реЗрдЯ рдХрд░рдиреЗ рд╕реЗ рдкрд╣рд▓реЗ #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;
}
});
рдЕрдВрдд рдореЗрдВ рдореИрдВ рдЗрд╕ рдореБрджреНрджреЗ рдХреЛ рдЬреЛрдбрд╝рдХрд░ рд╣рд▓ рдХрд░рддрд╛ рд╣реВрдВ
$("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 рдХреЗ рд▓рд┐рдП рдкреНрд░рд╛рдкреНрдд рдХрд░рдирд╛ рдЪрд╛рд╣рддрд╛ рд╣реВрдВ рдЬрд┐рд╕рдореЗрдВ рд╕реНрдХреНрд░реЙрд▓рд┐рдВрдЧ рд╡рд╛рд▓реЗ рддрддреНрд╡ рд╣реИрдВ ... рдпрджрд┐ рдЖрдк рдЗрд╕ рдореБрджреНрджреЗ рдХреЗ рд╕рд╛рде рдореЗрд░реА рдорджрдж рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ рддреЛ рдпрд╣ рд╣реЛрдЧрд╛ рдореЗрд░реЗ рд▓рд┐рдП рдмрд╣реБрдд рдорджрдж рдХреА... рдореБрдЭреЗ рдЖрдкрдХреА рдЯрд┐рдкреНрдкрдгрд┐рдпреЛрдВ рдХреА рдкреНрд░рддреАрдХреНрд╖рд╛ рд╣реИ...
рдХреГрдкрдпрд╛ рдХреНрдпрд╛ рдЖрдк рдореБрдЭреЗ рджрд┐рдЦрд╛ рд╕рдХрддреЗ рд╣реИрдВ рдХрд┐ рдЖрдкрдХреЛ рдХрд╛рдо рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рд╢рд░реАрд░ рдХреИрд╕реЗ рдорд┐рд▓рд╛
рд╕рдмрд╕реЗ рдЙрдкрдпреЛрдЧреА рдЯрд┐рдкреНрдкрдгреА
@ruthraprakash , рдореЗрд░реЗ рдкрд╛рд╕ рдПрдХ рд╕рдорд╛рди рд╕рдорд╕реНрдпрд╛ рдереАред рдпрд╣ рдирд╡реАрдирддрдо рд╕рдВрд╕реНрдХрд░рдг рдкрд░ рдореЗрд░реЗ рд╕рд░рд▓ рдЙрджреНрджреЗрд╢реНрдпреЛрдВ рдХреЗ рд▓рд┐рдП рдХрд╛рдо рдХрд░рддрд╛ рд╣реИ: