1

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.

1 respuesta 1

1

Pensé en eliminar la pregunta, pero decidí dejarla por si a alguien le puede servir en un futuro. El ejemplo anterior es correcto y funciona! después de investigar por un buen rato llegue a la conclusión de que el motivo esta en que:

Por motivos de seguridad, la unidad local del cliente se declara con otro dominio y mancha el lienzo. Esto se debe a que al estar realizando pruebas en mi PC estaba ejecutando el proyecto sin ningún servidor en mi caso (PHP) y la imagen la reconocía por así decirlo como confidencial las soluciones posibles están entre:

  • Publicar la imagen en un sitio que admita el uso compartido entre dominios (como dropbox.com o GitHub). Asegurarse de poner la imágenes en la carpeta pública de Dropbox y también establecer la bandera de origen cruzado al descargar la imagen ( ...)var img=new Image(); img.crossOrigin="anonymous"
  • Instalar un servidor web en el equipo de desarrollo como IIS o Apache depende de su proyecto.

La solución mas factible y por obvias razones es la segunda.

Al final termine convirtiendo el div en imagen con canvas y posteriormente pasarlo a pdf, probé pasando el div directamente a PDF pero la resolución era muy deficiente el proyecto quedo de la siguiente manera:

<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>
<button class="btnImg" id="btnImg" onclick="f()">img</button>
<button class="btnPdf" id="btnPdf" >pdf</button>

El script:

//Convierte el div a imagen y la descarga
function f(){
    html2canvas(document.querySelector("#contenedorC")).then(canvas => {
        return Canvas2Image.saveAsImage(canvas, null, null, "png", "img");
    });
}

$(function() {
    $("#btnPdf").click(function() {
        html2canvas($("#contenedorC"), {
            allowTaint: true,
            onrendered: function(canvas) {
                theCanvas = canvas;
                document.body.appendChild(canvas);

                var imgData = canvas.toDataURL("image/PNG").replace("image/PNG","image/octet-stream");
                var pdf = new jsPDF('l','mm','letter');
            
                pdf.addImage(imgData, 'PNG', 0, 0);
                pdf.save("download.pdf");
            }
        });
    });
});

Las librerías que utilice fueron:

Espero y les sirva

1
  • Recuerda marcar como aceptada a tu respuesta :)
    – fredyfx
    Commented el 8 oct. 2021 a las 20:21

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.