html2canvas div内有滚动条导致生成图片的内容不全

Question

只把左边 图片区的内容 生成图片

$(document).ready(function(){
                var element = $('#cBody');
                var cwidth = $('#content').width();
                var cheight = $('#cBody').height();
                var scrollY = $('#cBody').scrollTop();
                var scrollX = $('#cBody').scrollLeft();
                $("#createImgBtn").on('click', function () {
                    html2canvas(element,{
                        width: cwidth, //dom 原始宽度
                        height: document.getElementById('cBody').scrollHeight,
                        windowHeight: document.getElementById('cBody').scrollHeight,
                        scrollY: -scrollY,
                        scrollX: 0,
                    }).then(function (canvas) {
                        var imgUri = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); // 获取生成的图片的url 　
                        var saveLink = document.createElement('a');
                        saveLink.href = imgUri;
                        saveLink.download = 'images.png';//保存的图片的名字
                        saveLink.click();
                    });
                })
            })

生成的照片 (内容不全)

Answer 1

你的element不要选产生滚动的元素，而是选里面没滚动的就行