рдореИрдВ рдХреБрдЫ рддрддреНрд╡реЛрдВ рдкрд░ data-html2canvas-ignore
рдЯреИрдЧ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░ рд░рд╣рд╛ рд╣реВрдВ, рд▓реЗрдХрд┐рди рдлрд╝рд╛рдпрд░рдлрд╝реЙрдХреНрд╕ рдореБрдЭреЗ рдирдХрд╛рд░рд╛рддреНрдордХ рдорд╛рд░реНрдЬрд┐рди рд╡рд╛рд▓реЗ рддрддреНрд╡реЛрдВ рдХреЗ рд╕рд╛рде рд╕рдорд╕реНрдпрд╛ рджреЗ рд░рд╣рд╛ рд╣реИред рдореИрдВ рдХрд┐рд╕реА рд╡рд┐рд╢реЗрд╖ рддрддреНрд╡ рдХреЗ рд▓рд┐рдП html2canvas-only рд╢реИрд▓реА рдЯреИрдЧ рдЬреЛрдбрд╝рдирд╛ рдЪрд╛рд╣реВрдВрдЧрд╛, рдЬреИрд╕реЗ: data-html2canvas-style="margin-left: 0"
ред
рдХреНрдпрд╛ рдХрд┐рд╕реА рдФрд░ рдХреЛ рднреА рдРрд╕рд╛ рдХреБрдЫ рдХрд░рдиреЗ рдХрд╛ рд╕реМрднрд╛рдЧреНрдп рдорд┐рд▓рд╛ рд╣реИ?
рдЖрдк рджрд╕реНрддрд╛рд╡реЗрдЬрд╝ рдХреА рд╕рд╛рдордЧреНрд░реА (рдЬреЛ рдореВрд▓ рдХрд╛ рдПрдХ рдХреНрд▓реЛрди рд╣реИ) рдХреЛ рд╕рдВрд╢реЛрдзрд┐рдд рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ рдЬреЛ рдЙрджрд╛рд╣рд░рдг рдХреЗ рд▓рд┐рдП onclone
рд╡рд┐рдХрд▓реНрдк рдХреЗ рд╕рд╛рде рдкреНрд░рджрд╛рди рдХрд┐рдпрд╛ рдЬрд╛рдПрдЧрд╛:
html2canvas(document.body, {onclone: function(document) {
document.querySelector('.something').style.marginLeft = 0;
}}).then(...)
рдзрдиреНрдпрд╡рд╛рдж рдирд┐рдХ! рдЗрд╕ рдкреБрд╕реНрддрдХрд╛рд▓рдп рдкрд░ рдЖрдкрдХреЗ рдХрд╛рдо рдХреА рдмрд╣реБрдд рд╕рд░рд╛рд╣рдирд╛ рдХрд░рддреЗ рд╣реИрдВред рдХреНрдпрд╛ рдпрд╣ рджрд╕реНрддрд╛рд╡реЗрдЬ рдореЗрдВ рд╣реИ?
рдирд╣реАрдВ рдмрджрдХрд┐рд╕реНрдорддреА рд╕реЗ рдирд╣реАрдВред рдкреНрд░рд▓реЗрдЦрди рдЗрд╕ рд╕рдордп рдХрдИ рдорд╛рдорд▓реЛрдВ рдореЗрдВ рдмрд╣реБрдд рдХрдореА рд╣реИ ...
рдореЗрд░реА рдбрд╛рдЙрдирд▓реЛрдб рдХреА рдЧрдИ рдЫрд╡рд┐ рдХреЛ рдЙрдЪрд┐рдд рд╕реНрдЯрд╛рдЗрд▓ рдирд╣реАрдВ рдорд┐рд▓ рд░рд╣рд╛ рд╣реИ, рдЗрд╕рд▓рд┐рдП рдореИрдВ рд╕рднреА рд╕реНрдЯрд╛рдЗрд▓ рдХреЛ рдЗрдирд▓рд╛рдЗрди рд╕реАрдПрд╕рдПрд╕ рдореЗрдВ рдкрд░рд┐рд╡рд░реНрддрд┐рдд рдХрд░рдХреЗ рдЗрд╕реЗ рдареАрдХ рд╕реЗ рдкреНрд░рд╕реНрддреБрдд рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдХрдВрдкреНрдпреВрдЯ-рд╕реНрдЯрд╛рдЗрд▓-рдЯреВ-рдЗрдирд▓рд╛рдЗрди-рд╢реИрд▓реА рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░ рд░рд╣рд╛ рд╣реВрдВред рд▓реЗрдХрд┐рди рдЗрд╕ рдореБрджреНрджреЗ рдХреЗ рд╕рд╛рде рдпрд╣ рдореВрд▓ рдбреЛрдо рдХреЛ рдкреНрд░рднрд╛рд╡рд┐рдд рдХрд░ рд░рд╣рд╛ рд╣реИред рдЗрд╕рд▓рд┐рдП рдореИрдВ рдЗрд╕реЗ рдСрдирдХреНрд▓реЛрди рдлрд╝рдВрдХреНрд╢рди рдХреЗ рдЕрдВрджрд░ рдХреНрд▓реЛрди рдХрд┐рдП рдЧрдП рддрддреНрд╡ рдХреЗ рд▓рд┐рдП рдХрд░рдирд╛ рдЪрд╛рд╣рддрд╛ рд╣реВрдВ, рд▓реЗрдХрд┐рди рдпрд╣ рдХрд╛рдо рдирд╣реАрдВ рдХрд░ рд░рд╣рд╛ рд╣реИ рдФрд░ рдЫрд╡рд┐ рдареАрдХ рд╕реЗ рд╕реНрдЯрд╛рдЗрд▓ рдирд╣реАрдВ рд╣реИред рдХрд┐рд╕реА рднреА рд╡рд┐рдЪрд╛рд░ рдХреНрдпреЛрдВ рд╣реЛ рд░рд╣рд╛ рд╣реИ?
рдореИрдВрдиреЗ рд╡рд╣реА рдХрд╛рдо рдХрд░рдиреЗ рдХреА рдХреЛрд╢рд┐рд╢ рдХреА, рдпрд╣рд╛рдБ рдмрддрд╛рдпрд╛ рдЧрдпрд╛ рд╣реИ рдХрд┐ рдореИрдВрдиреЗ рдЗрд╕реЗ рдХреИрд╕реЗ рд▓рд╛рдЧреВ рдХрд┐рдпрд╛ рдФрд░ рдореЗрд░реА рд╕рднреА рд╢реИрд▓рд┐рдпреЛрдВ рдХреЛ рдареАрдХ рд╕реЗ рдбрд╛рдЙрдирд▓реЛрдб рдХрд┐рдпрд╛ рдЧрдпрд╛:
const computedStyleToInlineStyle = require("computed-style-to-inline-style");
html2canvas(document.querySelector(".someclass"), {onclone: function(document) {
computedStyleToInlineStyle(document.querySelector(".someclass"), {
recursive: true
});
}}).then(canvas => {
const imgData = canvas.toDataURL('image/png');
...
});
рд╕рдмрд╕реЗ рдЙрдкрдпреЛрдЧреА рдЯрд┐рдкреНрдкрдгреА
рдЖрдк рджрд╕реНрддрд╛рд╡реЗрдЬрд╝ рдХреА рд╕рд╛рдордЧреНрд░реА (рдЬреЛ рдореВрд▓ рдХрд╛ рдПрдХ рдХреНрд▓реЛрди рд╣реИ) рдХреЛ рд╕рдВрд╢реЛрдзрд┐рдд рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ рдЬреЛ рдЙрджрд╛рд╣рд░рдг рдХреЗ рд▓рд┐рдП
onclone
рд╡рд┐рдХрд▓реНрдк рдХреЗ рд╕рд╛рде рдкреНрд░рджрд╛рди рдХрд┐рдпрд╛ рдЬрд╛рдПрдЧрд╛: