Html2canvas: рдПрдХрд╛рдзрд┐рдХ-рдорд╛рди рдХреЗ рд╕рд╛рде рдлрд╝реЙрдиреНрдЯ-рдкрд░рд┐рд╡рд╛рд░ рдХреА рд╕рдВрдкрддреНрддрд┐ рдХрд╛ рд╕рдорд░реНрдерди рдирд╣реАрдВ рдХрд░рддрд╛ рд╣реИ

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

0.5.0-beta4 рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдирд╛, рдЗрд╕ рдорд╣рд╛рди рдореЙрдбреНрдпреВрд▓ рдХреЗ рд▓рд┐рдП рдмрд╣реБрдд рдмрд╣реБрдд рдзрдиреНрдпрд╡рд╛рдж!

рдореБрдЭреЗ рдЬреЛ рд╕рдорд╕реНрдпрд╛ рд╣реЛ рд░рд╣реА рд╣реИ, рдХрд╣рд┐рдП рдХрд┐ рдореЗрд░реЗ рдкрд╛рд╕ рдПрдХ рд╡рд░реНрдЧ рд╣реИ
.class { font-family: "somefont", "Arial" }
рдЬрд╣рд╛рдВ "somefont" рд▓рд╛рдЧреВ рдирд╣реАрдВ рд╣реЛрддрд╛ рд╣реИ, рдЕрдВрддрд┐рдо рдкрд░рд┐рдгрд╛рдо рд╡реЗ рддрддреНрд╡ рд╣реЛрддреЗ рд╣реИрдВ рдЬреЛ .class рдкреГрд╖реНрда рдореЗрдВ рдПрд░рд┐рдпрд▓ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдХреЗ рдкреНрд░рд╕реНрддреБрдд рдХрд┐рдП рдЬрд╛рдПрдВрдЧреЗ, рд▓реЗрдХрд┐рди рдХреИрдирд╡рд╛рд╕ рдореЗрдВ рдЗрд╕рдХреЗ рдмрдЬрд╛рдп рдбрд┐рдлрд╝реЙрд▓реНрдЯ рдлрд╝реЙрдиреНрдЯ рд▓рд╛рдЧреВ рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИред

рдХреЛрдИ рдЙрдкрд╛рдп?

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

рдореБрдЭреЗ рдЗрд╕рдХрд╛ рдХрд╛рд░рдг рдорд┐рд▓рд╛: рдХреИрдирд╡рд╛рд╕ рдХреЗ рдорд╛рддрд╛-рдкрд┐рддрд╛ рдХреЛ рд╕реНрдкрд╖реНрдЯ рдлрд╝реЙрдиреНрдЯ рдХреА рдШреЛрд╖рдгрд╛ рдХрд░рдиреА рд╣реЛрдЧреА рдЬреИрд╕реЗ:
.container { font-family: Roboto, "Helvetica Neue", sans-serif; }

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

рдореИрдВ рдПрдХ рд╣реА рдореБрджреНрджрд╛ рд░рд╣рд╛ рд╣реВрдБред

рдпрд╣ Google рдХреНрд░реЛрдо рдХреИрдирд░реА рдореЗрдВ рд░реЛрдмреЛрдЯреЛ рдлреЙрдиреНрдЯ рд╣реИ
screen shot 2016-02-18 at 15 18 27

рдпрд╣ рдЫрд╡рд┐ рдкреНрд░рджрд╛рди рдХреА рдЧрдИ рд╣реИ
img055

рдореБрдЭреЗ рдЗрд╕рдХрд╛ рдХрд╛рд░рдг рдорд┐рд▓рд╛: рдХреИрдирд╡рд╛рд╕ рдХреЗ рдорд╛рддрд╛-рдкрд┐рддрд╛ рдХреЛ рд╕реНрдкрд╖реНрдЯ рдлрд╝реЙрдиреНрдЯ рдХреА рдШреЛрд╖рдгрд╛ рдХрд░рдиреА рд╣реЛрдЧреА рдЬреИрд╕реЗ:
.container { font-family: Roboto, "Helvetica Neue", sans-serif; }

CanvasRenderer.prototyp.font рдореЗрдВ рд╢рд╛рдорд┐рд▓ / рд╡рд┐рднрд╛рдЬрд┐рдд рдЕрддрд┐рд░рд┐рдХреНрдд рдлреЛрдВрдЯ рдмрд╛рд╣рд░ рдирд┐рдХрд╛рд▓ рд░рд╣рд╛ рдерд╛ред рдореИрдВрдиреЗ рдЗрд╕рдХреЗ рд▓рд┐рдП рдПрдХ рд╢реБрд▓реНрдХ рдЬрдорд╛ рдХрд┐рдпрд╛

рдореБрдЭреЗ рдпрдХреАрди рдирд╣реАрдВ рд╣реИ рдХрд┐ рдпрд╣ рд╕рдВрдмрдВрдзрд┐рдд рд╣реИ, рд▓реЗрдХрд┐рди рдпрд╣рд╛рдВ рдореБрдЭреЗ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рдореИрдВ рдлрд╝реЙрдиреНрдЯ рдХреЛ рд╕рд╣реА рддрд░реАрдХреЗ рд╕реЗ рдкреНрд░рд╕реНрддреБрдд рдХрд░ рд░рд╣рд╛ рд╣реВрдВ, рд▓реЗрдХрд┐рди рдлрд┐рд░ рдПрдХ рдЧрд▓рдд рдлрд╝реЙрдиреНрдЯ рдХреЗ рд╕рд╛рде рд╕реНрддрд░рд┐рдд рд╣реЛ рдЧрдпрд╛?

@ eZ0 рдЖрдк рд╕рд╣реА рд╣реИрдВ! рдзрдиреНрдпрд╡рд╛рдж!
рдЬреИрд╕рд╛ рдХрд┐ рдЖрдкрдиреЗ рдХрд╣рд╛, рдореИрдВрдиреЗ рдХреИрдирд╡рд╛рд╕ рдХреЗ рдореВрд▓ рддрддреНрд╡ рдкрд░ font-family: arial рд▓рдЧрд╛рдпрд╛ рд╣реИ рдФрд░ рдХрд╛рдо рдХрд░рддрд╛ рд╣реИ!ред

рдзрдиреНрдпрд╡рд╛рдж! рдзрдиреНрдпрд╡рд╛рдж!

Https://github.com/niklasvh/html2canvas/commit/77d258f1d8eeccf7e38235463a293b512c1ca3d0 рдореЗрдВ рддрдп рдХрд┐рдпрд╛ рдЬрд╛рдирд╛ рдЪрд╛рд╣рд┐рдП

рдХрд╛рдо рдирд╣реАрдВ, рдореБрдЭреЗ рд╡рд╣реА рддреНрд░реБрдЯрд┐ рдорд┐рд▓реА
image

рджреНрд╡рд╛рд░рд╛ рдкреНрд░рд╕реНрддреБрдд

html2canvas(this.$refs.iFr, { useCORS: true }).then(canvas => {
        console.log(canvas)

        document.body.appendChild(canvas)

        canvas.toBlob(function(blob) {
          saveAs(blob, 'Dashboard.png')
        })
      })

рд╕рд░реНрд╡рд░ рд╕реЗ рдХрд╕реНрдЯрдо рд▓реЛрдб рдХрд┐рдП рдЧрдП рдлреЛрдВрдЯ (рдХреЛрд░ рдирд╣реАрдВ) рдкреНрд░рд╕реНрддреБрдд рдХрд░рдирд╛ рдирд╣реАрдВ рд╣реИред рдкреНрд░рдпреБрдХреНрдд рдлрд╝реЙрдиреНрдЯ - рдЖрдзрд╛рд░рд┐рдд 64 рд╕реАрдПрд╕рдПрд╕ рдлрд╝рд╛рдЗрд▓ рдлрд╝реЙрдиреНрдЯ-рдлреЗрд╕ рдХреЗ рд░реВрдк рдореЗрдВ рд▓рд┐рдмрд░реЗрд╢рди рд╕реЗрд░рд┐рдлрд╝ рдХреЗ рд▓рд┐рдП

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

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

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

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

yasergh picture yasergh  ┬╖  5рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

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

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