Html2canvas: ¿Estilo de elemento solo para html2canvas?

Creado en 19 oct. 2015  ·  5Comentarios  ·  Fuente: niklasvh/html2canvas

Estoy usando la práctica etiqueta data-html2canvas-ignore en algunos elementos, pero Firefox me está dando problemas con elementos con márgenes negativos. Me gustaría poder agregar una etiqueta de estilo solo html2canvas para un elemento en particular, como: data-html2canvas-style="margin-left: 0" .

¿Alguien más ha tenido suerte haciendo algo como esto?

Question

Comentario más útil

Puede modificar el contenido del documento (que es un clon del original) que se renderizará con la opción onclone , por ejemplo:

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

Todos 5 comentarios

Puede modificar el contenido del documento (que es un clon del original) que se renderizará con la opción onclone , por ejemplo:

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

¡Gracias Nik! Aprecio mucho su trabajo en esta biblioteca. ¿Está esto en la documentación?

No, desafortunadamente no. La documentación es muy deficiente en muchos aspectos en este momento ...

Mi imagen descargada no tiene el estilo adecuado, así que estoy usando estilo computado a estilo en línea para renderizarlo correctamente al convertir todo el estilo a CSS en línea. Pero el problema con eso es que está afectando al dom original. Así que quiero hacerlo para el elemento clonado en su lugar dentro de la función onclone, pero no funciona y la imagen no tiene el estilo adecuado. ¿Alguna idea de por qué está pasando?

Intenté hacer lo mismo, así es como lo implementé y todos mis estilos se descargaron correctamente:

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');
        ...
    });
¿Fue útil esta página
0 / 5 - 0 calificaciones