7

Estoy trabajando con la librería html2canvas para capturar el contenido de un <div> y guardarlo como imagen.

El problema se da al intentar capturar las imágenes de fondo del contenedor, pues únicamente me está trayendo texto.

function fAgrega() {
  const options = {
    weekday: 'long',
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    timeZone: 'UTC'
  };
  document.getElementById("Text2").value = document.getElementById("Text1").value;
  document.getElementById("Text4").value = document.getElementById("Text3").value;
  document.getElementById("Text6").value = new Date(document.getElementById("Text5").value).toLocaleDateString("es-CO", options);
}


$("#changewp").change(function() {
  var imageFileName = $(this).val();
  $(".fondo").css("background-image", "url('https://lauraz956.github.io/demos/assets/img/" + imageFileName + ".jpg')");
});


$(function() {
  $("#crearimagen").click(function() {
    html2canvas($("#contenido"), {
      onrendered: function(canvas) {
        theCanvas = canvas;
        document.body.appendChild(canvas);

        /*
        canvas.toBlob(function(blob) {
          saveAs(blob, "Dashboard.png");
        });
        */
      }
    });
  });
});


$(function() {
  $("#uploadFile").on("change", function() {
    var files = !!this.files ? this.files : [];
    if (!files.length || !window.FileReader) return; // no file selected, or no FileReader support

    if (/^image/.test(files[0].type)) { // only image file
      var reader = new FileReader(); // instance of the FileReader
      reader.readAsDataURL(files[0]); // read the local file

      reader.onloadend = function() { // set image data as background of div
        $("#imagePreview").css("background-image", "url(" + this.result + ")");
        $(".texto_preview").remove();
      }
    }
  });
  $('#imagePreview').click(function() {
    $('#uploadFile').trigger('click');
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://lauraz956.github.io/demos/assets/css/estilos.css">
<script src="https://lauraz956.github.io/demos/assets/js/filesaver.js"></script>
<script src="https://lauraz956.github.io/demos/assets/js/html2canvas.js"></script>


<body>

  <div class="container">
    <div class="row">

      <div class="col-md-6">

        <h1>Datos</h1>
        <div class="col-md-6">
          Producto: <input id="Text1" type="text" onkeyup="fAgrega();" />

          <br><br> Seleccione:
          <select onchange="fAgrega()" id="Text3">
            <option>Opcion 1</option>
            <option>Opcion 2</option>
            <option>Opcion 3</option>
          </select>

          <br><br> Fecha: <input id="Text5" onchange="fAgrega()" type="date" name="fecha">

          <br><br>

          <label for="pictype">Fondo</label>
          <select id="changewp" name="changewp">
            <option value="p1">pic1</option>
            <option value="p2">pic2</option>
          </select>

        </div>
      </div>

      <div class="col-md-6">
        <div class="row" id="contenido">

          <div class="col-md-12 fondo" style="width: 500px; height: 300px; border: 1px solid;">

            <p>
              Su producto es <b><input id="Text2" type="text" class="preview_txt" /></b> y la seleccion es la <input id="Text4" type="text" class="preview_txt" /> del día <input id="Text6" type="text" class="preview_txt" />
            </p>
            <div id="imagePreview"></div>
            <span class="texto_preview">Subir Imagen</span>
            <input id="uploadFile" type="file" name="image" class="img" />
          </div>
        </div>

        <br><br>
        <button id="crearimagen" class="form-control">Crear Imagen</button>

      </div>
    </div>
  </div>

</body>

La captura se realiza una vez seleccionados los datos a introducir manualmente desde unos input, la imagen de fondo están guardadas en el servidor y la imagen que sube el usuario para previsualizarse lo hace desde su equipo localmente.

Estos datos a capturar son los que se encuentren dentro de

<div class="row" id="contenido">

1 respuesta 1

5

Dos cosas a tener en cuenta:

La función allowTaint debe ser true, según la documentación para añadir imágenes incrustadas, esta propiedad debe ser true.

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

            /*
            canvas.toBlob(function(blob) {
              saveAs(blob, "Dashboard.png");
            });
            */
          }
        });
      });
    });

Por otro lado, en el CSS, tanto del background como de la imagen que insertas dinámicamente, la propiedad background-size debe tener los valores 100% 100% en lugar de un background-size: cover. Me late que la librería pasa por alto el cover.

Este es el CSS al que me refiero:

.fondo {
background-size: 100% 100%;
}

#imagePreview {
background-size: 100% 100%;
}
5
  • 1
    Perfecto! Mil gracias por el apoyo!.
    – LauraZ
    Commented el 21 ago. 2019 a las 20:49
  • Vale, con cariño :D Que sigas desarrollando con todo el power 2.0!!! :D
    – fredyfx
    Commented el 22 ago. 2019 a las 21:10
  • Una consulta, yo hago una capture de una gráfica de google charts y la guardo sin problemas desde la pc pero cuando la hago desde mi móvil solo se guarda el fondo y no la gráfica.... Commented el 11 may. 2020 a las 11:31
  • eso podría ser tranquilamente otra pregunta debido a que el entorno es diferente, ¿te animas a lanzar la pregunta indicando el sistema operativo de tu móvil, además del navegador y de la versión que uses?
    – fredyfx
    Commented el 11 may. 2020 a las 18:56
  • hola espero puedas ayudarme con mi pregunta, es similar a esta, el error que me arroja es: DOMException: Error al ejecutar 'toDataURL' en 'HTMLCanvasElement': los lienzos contaminados no se pueden exportar. Commented el 7 oct. 2021 a las 16:12

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.