Π― ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠ΄ΠΎΠ±Π½ΡΠΉ ΡΠ΅Π³ 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(...)
Π‘ΠΏΠ°ΡΠΈΠ±ΠΎ, ΠΠΈΠΊ! Π― ΠΎΡΠ΅Π½Ρ ΡΠ΅Π½Ρ Π²Π°ΡΡ ΡΠ°Π±ΠΎΡΡ Π½Π°Π΄ ΡΡΠΎΠΉ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΎΠΉ. ΠΡΠΎ Π² Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ?
ΠΠ΅Ρ, ΠΊ ΡΠΎΠΆΠ°Π»Π΅Π½ΠΈΡ Π½Π΅Ρ. ΠΠ° Π΄Π°Π½Π½ΡΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ ΠΏΠΎ ΠΌΠ½ΠΎΠ³ΠΈΠΌ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠ°ΠΌ ΠΎΡΠ΅Π½Ρ Π½Π΅ Ρ Π²Π°ΡΠ°Π΅Ρ ...
ΠΠΎΠ΅ Π·Π°Π³ΡΡΠΆΠ΅Π½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ ΠΏΠΎΠ»ΡΡΠ°Π΅Ρ Π½Π°Π΄Π»Π΅ΠΆΠ°ΡΠ΅Π³ΠΎ ΡΡΠΈΠ»Ρ, ΠΏΠΎΡΡΠΎΠΌΡ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ 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');
...
});
Π‘Π°ΠΌΡΠΉ ΠΏΠΎΠ»Π΅Π·Π½ΡΠΉ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΉ
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ° (ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΊΠ»ΠΎΠ½ΠΎΠΌ ΠΎΡΠΈΠ³ΠΈΠ½Π°Π»Π°), ΠΊΠΎΡΠΎΡΡΠΉ Π±ΡΠ΄Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Ρ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠΎΠΌ
onclone
, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ: