html2canvas页面滚动内容截图并下载

<!--div转成图片并下载-->
    <script src="./js/html2canvas.min.js"></script>
    <script>
        // edited from https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob#Polyfill
        var dataURIToBlob =  function (imgName, dataURI, callback) {
            var binStr = atob(dataURI.split(',')[1]),
                            len = binStr.length,
                            arr = new Uint8Array(len);

            for (var i = 0; i < len; i++) {
                arr[i] = binStr.charCodeAt(i);
            }

            callback(imgName, new Blob([arr]));
        }

        var callback = function (imgName, blob) {
            var triggerDownload = $("<a>").attr("href", URL.createObjectURL(blob)).attr("download", imgName).appendTo("body").on("click", function () {
                if (navigator.msSaveBlob) {
                    return navigator.msSaveBlob(blob, imgName);
                }
            });
            triggerDownload[0].click();
            triggerDownload.remove();
        };

        function createImg() {
            var getPixelRatio = function (context) { // 获取设备的PixelRatio
                var backingStore = context.backingStorePixelRatio ||
                                context.webkitBackingStorePixelRatio ||
                                context.mozBackingStorePixelRatio ||
                                context.msBackingStorePixelRatio ||
                                context.oBackingStorePixelRatio ||
                                context.backingStorePixelRatio || 0.5;
                return (window.devicePixelRatio || 0.5) / backingStore;
            };
            //生成的图片名称
            var imgName = "cs.png";
            var shareContent = document.getElementsByTagName("body")[0];
            let scale = 3;
            var opts = {
                //scale: scale,
                /*canvas: canvas,
                width: width,
                height: height,*/
                dpi: window.devicePixelRatio,
                useCORS: true, // 【重要】开启跨域配置
                //width: window.screen.availWidth,  //显示的canvas窗口的宽度
                //height: window.screen.availHeight, //显示的canvas窗口的高度
                width: window.document.body.offsetWidth,   //获取当前网页的宽度
                height: window.document.body.offsetHeight, //获取当前网页的高度
                windowWidth: document.body.scrollWidth,     //获取X方向滚动条内容
                windowHeight: document.body.scrollHeight, //获取Y方向滚动条内容
                x: 0,                                                                            //页面在水平方向没有滚动，故设置为0
                y: window.pageYOffset                                            //页面在垂直方向的滚动距离
            };
            html2canvas(shareContent, opts).then(function (canvas) {
                const context = canvas.getContext("2d");

                // 【重要】关闭抗锯齿 https://segmentfault.com/a/1190000011478657
                context.imageSmoothingEnabled = false;
                context.webkitImageSmoothingEnabled = false;
                context.msImageSmoothingEnabled = false;
                context.imageSmoothingEnabled = false;
                let imgUrl = canvas.toDataURL("image/png").replace("image/png","image/octet-stream");
                //console.log("imgUrl",imgUrl);
                dataURIToBlob(imgName, imgUrl, callback);
            });
        }

    </script>

其实滚动不滚动无所谓，只要截图的元素不是视口元素，而是包裹滚动内容的元素，就可以截全了。