Html2canvas: рдХреЗрд╡рд▓ HTML2canvas рдХреЗ рд▓рд┐рдП рд╕реНрдЯрд╛рдЗрд▓ рд╕реНрдЯрд╛рдЗрд▓?

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

рдореИрдВ рдХреБрдЫ рддрддреНрд╡реЛрдВ рдкрд░ 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(...)

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

рдЖрдк рджрд╕реНрддрд╛рд╡реЗрдЬрд╝ рдХреА рд╕рд╛рдордЧреНрд░реА (рдЬреЛ рдореВрд▓ рдХрд╛ рдПрдХ рдХреНрд▓реЛрди рд╣реИ) рдХреЛ рд╕рдВрд╢реЛрдзрд┐рдд рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ рдЬреЛ рдЙрджрд╛рд╣рд░рдг рдХреЗ рд▓рд┐рдП 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');
        ...
    });
рдХреНрдпрд╛ рдпрд╣ рдкреГрд╖реНрда рдЙрдкрдпреЛрдЧреА рдерд╛?
0 / 5 - 0 рд░реЗрдЯрд┐рдВрдЧреНрд╕

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

diego-rey picture diego-rey  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

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

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

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

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