Html2canvas: Π‘Ρ‚ΠΈΠ»ΡŒ элСмСнта Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для html2canvas?

Π‘ΠΎΠ·Π΄Π°Π½Π½Ρ‹ΠΉ Π½Π° 19 ΠΎΠΊΡ‚. 2015  Β·  5ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ  Β·  Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ: niklasvh/html2canvas

Π― ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽ ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΉ Ρ‚Π΅Π³ data-html2canvas-ignore для Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… элСмСнтов, Π½ΠΎ Firefox Π΄Π°Π΅Ρ‚ ΠΌΠ½Π΅ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ с элСмСнтами с ΠΎΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌΠΈ полями. Π― Ρ…ΠΎΡ‚Π΅Π» Π±Ρ‹ ΠΈΠΌΠ΅Ρ‚ΡŒ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ‚Π΅Π³ стиля Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для html2canvas для ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ элСмСнта, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€: 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(...)

Бпасибо, Ник! Π― ΠΎΡ‡Π΅Π½ΡŒ Ρ†Π΅Π½ΡŽ Π²Π°ΡˆΡƒ Ρ€Π°Π±ΠΎΡ‚Ρƒ Π½Π°Π΄ этой Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΎΠΉ. Π­Ρ‚ΠΎ Π² Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΠΈ?

НСт, ΠΊ соТалСнию Π½Π΅Ρ‚. На Π΄Π°Π½Π½Ρ‹ΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ‚ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΠΈ ΠΏΠΎ ΠΌΠ½ΠΎΠ³ΠΈΠΌ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π°ΠΌ ΠΎΡ‡Π΅Π½ΡŒ Π½Π΅ Ρ…Π²Π°Ρ‚Π°Π΅Ρ‚ ...

МоС Π·Π°Π³Ρ€ΡƒΠΆΠ΅Π½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅Ρ‚ Π½Π°Π΄Π»Π΅ΠΆΠ°Ρ‰Π΅Π³ΠΎ стиля, поэтому я ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽ computed-style-to-in-line-style, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ΡŒ Π΅Π³ΠΎ, ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Π² всС стили Π²ΠΎ встроСнный CSS. Но ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ° Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ это влияСт Π½Π° исходный Π΄ΠΎΠΌ. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ я Ρ…ΠΎΡ‡Ρƒ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ это для ΠΊΠ»ΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ элСмСнта вмСсто Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ onclone, Π½ΠΎ ΠΎΠ½ Π½Π΅ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚, ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΎ. Π•ΡΡ‚ΡŒ ΠΈΠ΄Π΅ΠΈ, ΠΏΠΎΡ‡Π΅ΠΌΡƒ это происходит?

Π― попытался ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ‚ΠΎ ΠΆΠ΅ самоС, Π²ΠΎΡ‚ ΠΊΠ°ΠΊ я это Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π», ΠΈ всС ΠΌΠΎΠΈ стили Π±Ρ‹Π»ΠΈ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ Π·Π°Π³Ρ€ΡƒΠΆΠ΅Π½Ρ‹:

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 Ρ€Π΅ΠΉΡ‚ΠΈΠ½Π³ΠΈ

Π‘ΠΌΠ΅ΠΆΠ½Ρ‹Π΅ вопросы

amine86 picture amine86  Β·  22ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ

arindamINT picture arindamINT  Β·  37ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ

hanc1208 picture hanc1208  Β·  23ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ

adilapapaya picture adilapapaya  Β·  37ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ

trongdau184 picture trongdau184  Β·  64ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ