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">