Home / Questions / 287300
Accepted
LauraZ
Asked: 2020-08-22 11:42:14 +0800 CST 2020-08-22 11:42:14 +0800 CST

HTML2Canvas renders without background images, only saves text

  • 772

I am working with the html2canvas library to capture the content of a <div>and save it as an image.

The problem occurs when trying to capture the background images of the container, since it is only bringing me text.

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>

The capture is done once the data to be entered manually from some is selected input, the background image is saved on the server and the image that the user uploads to preview it is done locally from their computer.

These data to be captured are those found within

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

1 Answers

  1. Best Answer

    Two things to keep in mind:

    The function allowTaintmust be true, according to the documentation for adding embedded images, this property must be 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");
            });
            */
          }
        });
      });
    });

    On the other hand, in the CSS of both the backgroundand the image you insert dynamically, the property background-sizemust have the values 100% 100%​​instead of a background-size: cover. It beats me that the bookstore overlooks the cover.

    This is the CSS I'm referring to:

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

#imagePreview {
background-size: 100% 100%;
}
    • 5