ScreenCat.js

async function cutImg(name,DomStr) {
    let targetDom = document.querySelector(DomStr)

    targetDom.scrollTop=0;
    let Max=Math.ceil(targetDom.scrollHeight/targetDom.offsetHeight),Canvases=[],LastHeight=targetDom.scrollHeight-(Max-1)*targetDom.offsetHeight,ICs=[];
    for (let i = 0; i < Max; i++) {
        if(i==(Max-1)&&(LastHeight>0)){
            ICs=await html2canvas(document.querySelector("body"), { useCORS: true, x:targetDom.offsetLeft,y:targetDom.offsetTop-LastHeight+targetDom.offsetHeight,height: LastHeight, width: targetDom.scrollWidth })
            targetDom.scrollTop+=LastHeight
        }else{
            ICs=await html2canvas(document.querySelector("body"), { useCORS: true, x:targetDom.offsetLeft,y:targetDom.offsetTop,height: targetDom.offsetHeight, width: targetDom.scrollWidth })
            targetDom.scrollTop+=targetDom.offsetHeight
        }
        Canvases.push(ICs)

        //     .then(function (canvas) {
        //     var imgData = canvas.toDataURL();
        //     // document.body.children[0].remove()
        //     //document.body.appendChild(canvas);  把截的图显示在网页上
        // })
    }
    let MergeC=MergeCanvases(Canvases);
    var imgData = MergeC.toDataURL();

    //获取年月日作为文件名
    var timers = new Date();
    var fullYear = timers.getFullYear();
    var month = timers.getMonth() + 1;
    var date = timers.getDate();
    var randoms = Math.random() + '';
    //年月日加上随机数
    var numberFileName = fullYear + '' + month + date + randoms.slice(3, 10);
    //保存图片
    var saveFile = function (data, filename) {
        var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
        save_link.href = data;
        save_link.download = filename;
        var event = document.createEvent('MouseEvents');
        event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
        save_link.dispatchEvent(event);
    };
    //最终文件名+文件格式
    var filename =  getNowDate()+ (name || currentWord) + '.png';
    saveFile(imgData, filename);
}

const getNowDate = () => {
    var date = new Date();
    var sign2 = ":";
    var year = date.getFullYear() // 年
    var month = date.getMonth() + 1; // 月
    var day = date.getDate(); // 日
    var hour = date.getHours(); // 时
    var minutes = date.getMinutes(); // 分
    var seconds = date.getSeconds() //秒
    var weekArr = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天'];
    var week = weekArr[date.getDay()];
    // 给一位数的数据前面加 “0”
    if (month >= 1 && month <= 9) {
        month = "0" + month;
    }
    if (day >= 0 && day <= 9) {
        day = "0" + day;
    }
    if (hour >= 0 && hour <= 9) {
        hour = "0" + hour;
    }

    if (minutes >= 0 && minutes <= 9) {
        minutes = "0" + minutes;
    }

    if (seconds >= 0 && seconds <= 9) {
        seconds = "0" + seconds;
    }

    return year + "-" + month + "-" + day + " " + hour + sign2 + minutes + sign2 + seconds;
}

// 合并画布
function MergeCanvases(canvases) {
    // 创建一个新的画布
    let totalHeight = canvases.reduce((sum, canvas) => sum + canvas.height, 0);
    let maxWidth = Math.max(...canvases.map(canvas => canvas.width));
    let mergedCanvas = document.createElement('canvas');
    mergedCanvas.width = maxWidth;
    mergedCanvas.height = totalHeight;

    // 获取新画布的上下文
    let ctx = mergedCanvas.getContext('2d');

    // 依次绘制每个画布
    let currentY = 0;
    canvases.forEach(canvas => {
        ctx.drawImage(canvas, 0, currentY);
        currentY += canvas.height;
    });
    return mergedCanvas;
}