Hola, he estado tratando de crear un creador de carteles de plantilla con html2canvas. Cuando trato de renderizar mi lienzo, su acolchado disminuye inesperadamente.

Aquí está la foto real del lienzo:

El resultado de la representación es:

Esta es mi función de captura para renderizar el lienzo:

 function capture() { document.getElementById('fullpage').style.zoom = 3; $('#target').html2canvas({ onrendered: function (canvas) { //Set hidden field's value to image data (base-64 string) $('#img_val').val(canvas.toDataURL('image/png',1.0)); console.log(canvas.toDataURL("image/png",1.0)); //Submit the form manually document.getElementById("showimage").src = canvas.toDataURL('image/png',1.0); document.getElementById("image-holder").style.display = "block"; //document.getElementById("myForm").submit(); } }); document.getElementById('fullpage').style.zoom = 1; }

Este es el código html:

 <div class = "col-md-8"> <div id = "image-holder" style = "display:none; position:fixed; top: 0; left: 0;z-index:1000; width:100%; height:100%;"> <p onclick = "closeholder()" id = "closeholder" style="font-color:white;">X</p> <img id = "showimage" src = ""/> </div> <form method="POST" enctype="multipart/form-data" action="save.php" id="myForm"> <input type="hidden" name="img_val" id="img_val" value="" /> </form> <div id="target"> <div id = "main_bg" style = "z-index: 0;position: absolute;height: 100%;width:100%;"></div> </div> </div>