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





All Articles