tengo un un div html con mas elementos dentro el cual quiero convertir a imagen para ser descargada, esta parte ya funciona respetando el CSS, el problema esta en que necesito que ese div tenga una imagen como background, posteriormente le agregue el background-image al div y la imagen ya no se genera, el error que me arroja es:
DOMException: Error al ejecutar 'toDataURL' en 'HTMLCanvasElement': los lienzos contaminados no se pueden exportar.
el codigo html es:
<div class="col-8 contenedorC" id="contenedorC">
<div id="ifrm" name="ifrm" class="ifrm">
<div class="cajas c1">
<div id="lienzo" class="frente lienzo" style="width: 73%; height: 51%;">
<div class="lienzoBack1" id="lienzoBack1" style="position: absolute; width: 100%; height: 100%; opacity: 0.83; background-size: 100% 100%; background-repeat: no-repeat; background-position: center center;"></div> <!-- div con imagen de fondo-->
<!-- Mas etiquetas p ul li etc que no me generan errores en convercion a imagen -->
</div>
</div>
</div>
</div>
<script>
<!-- inserto imagen de fondo -->
var backgroundI1 = document.getElementById("lienzoBack1");
backgroundI1.style.backgroundImage = 'url(./imagenFondo.jpg)';
</script>
<button class="btnImg" id="btnImg" onclick="f()">img</button> <!-- Boton para descargar como imagen -->
en el script tengo:
function f(){
html2canvas(document.querySelector("#contenedorC")).then(canvas => {
let d = canvas.toDataURL();
console.log(d);
return Canvas2Image.saveAsImage(canvas, null, null, "png", "img");
});
}
No conozco la forma en como se convierte la imagen de fondo a canvas, ya cheque la documentacion pero no logro con el resultado, me podrían ayudar por favor.