HTML2canvas on scrollable div in modal dialog
Hi I'm using the HTML2canvas plugin to transform a DIV inside a modal dialog. The conversion works fine. But this div has a vertical scroll. So, in the final image, nothing was transformed after the scrolled hidden area. Only the visual top of the div is in the rendered image. So how can I convert the entire div (doesn't matter the scroll) to an image. Here is my code
$('#modal_sidebyside .modal-content').html2canvas({
onrendered: function (canvas) {
//Set hidden field value to image data (base-64 string)
$('.export-sidebyside').hide();
//$('#modal_sidebyside .modal-body').css({ 'overflow-y': 'auto', 'height': 'auto' });
//$('#modal_sidebyside .modal-content').css({ 'overflow-y': 'auto', 'height': 'auto' });
var img = canvas.toDataURL('image/jpeg');
var link = document.getElementById("download-sidebyside");
link.download = "SidebySide.jpg"; //Setup name file
$(link).html("Download");
link.href = img.replace(/^data[:]image\/(png|jpg|jpeg)[;]/i, "data:application/octet-stream;");
$('.export-sidebyside').show();
// $('#modal_sidebyside .modal-body').css({ 'overflow-y': 'auto', 'height': '80%' });
// $('#modal_sidebyside .modal-content').css({ 'overflow-y': 'auto', 'height': '100%' });
//document.body.appendChild(link);
}
});
+3
source to share
No one has answered this question yet
Check out similar questions: