Html2canvas: Estilo de elemento apenas para html2canvas?

Criado em 19 out. 2015  ·  5Comentários  ·  Fonte: niklasvh/html2canvas

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?

Question

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:

html2canvas(document.body, {onclone: function(document) {
  document.querySelector('.something').style.marginLeft = 0;
}}).then(...)

Todos 5 comentários

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');
        ...
    });
Esta página foi útil?
0 / 5 - 0 avaliações