Вопросы Теги

HTml2Canvas renderiza без изображений фона, единственный сторож текст

Я работаю с книжным магазином html2canvas, чтобы захватывать контент одного <div> и сохранять это как изображение.

Проблема встречается, попробовав захватывать изображения фона контейнера, так как только меня приносит текст.

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>

Задержание осуществляется как только были выбраны данные, которых было нужно вводить вручную с одних input, изображение фона они сохранялись на сервере и изображение, которое пересылает пользователь, чтобы быть предварительно просмотренным, это делает с Вашей команды локально.

Эти данные, которых нужно захватывать, - те, которые находятся внутри 

<div class="row" id="contenido">
7
задан 21.08.2019, 22:42
0 ответов