Estou usando a útil tag data-html2canvas-ignore
em alguns elementos, mas o Firefox está me dando problemas com elementos com margens negativas. Eu gostaria de poder adicionar uma tag de estilo somente html2canvas para um elemento específico, como: data-html2canvas-style="margin-left: 0"
.
Alguém mais teve sorte em fazer algo assim?
Você pode modificar o conteúdo do documento (que é um clone do original) que será renderizado com a opção onclone
, por exemplo:
html2canvas(document.body, {onclone: function(document) {
document.querySelector('.something').style.marginLeft = 0;
}}).then(...)
Obrigado Nik! Agradeço muito seu trabalho nesta biblioteca. Isso está na documentação?
Não, infelizmente não. A documentação está faltando muito em muitos aspectos no momento ...
Minha imagem baixada não está obtendo o estilo adequado, então estou usando o estilo computado para o estilo embutido para renderizá-la corretamente, convertendo todo o estilo para css embutido. Mas o problema com isso é que está afetando o dom original. Portanto, quero fazer isso para o elemento clonado, em vez de dentro da função onclone, mas não está funcionando e a imagem não está com o estilo adequado. Alguma ideia do por que está acontecendo?
Tentei fazer a mesma coisa, aqui está como eu implementei e todos os meus estilos foram baixados corretamente:
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');
...
});
Comentários muito úteis
Você pode modificar o conteúdo do documento (que é um clone do original) que será renderizado com a opção
onclone
, por exemplo: