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?
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');
...
});
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: