html2canvas實現截取指定區域或iframe的區域

官網文檔: http://html2canvas.hertzen.com/

使用的是 jquery 3.2.1   html2canvas 1.0.0-rc.7

截取根據id的指定區域:

var canvasOtherTopHeight = $('.heading').height() + 31 + $('#site-navbar').height();  // .heading是指定區域父級上面同級的dom,因為存在高度,所以要計算到內

function createCanvas(id, obj) {
    // 1.獲取高度
    let canvasObj = $('#' + id);
    // 2.區域為畫布
    // console.log('--==', canvasObj.width(), canvasObj.height(), canvasObj.offset().left, canvasObj.parent().parent().position().top);

    html2canvas(canvasObj.get(0), {
        useCORS: true,
        width: canvasObj.width() + 5,
        height: canvasObj.height() - excelHeight,
        x: canvasObj.offset().left,
        y: canvasObj.parent().top + canvasOtherTopHeight
    }).then(canvas => {
        // canvasObj.parent().find('.target-canvas-img').attr('src', canvas.toDataURL('image/png', 1.0));
        canvasObj.parent().find('.canvas-wrapper .canvas-word').append(canvas);
    });

}

截取根據id的iframe的區域:

function createCanvas(id, obj) {
    // 1.獲取高度
    let canvasObj = $('#' + id);
    // 2.答案區域為圖片
    // console.log('--==', canvasObj.width(), canvasObj.height(), canvasObj.offset().left, canvasObj.parent().parent().position().top);
    // excel的高度
    let excelHeight = canvasObj.find('.answer-con-excel-container iframe').height();

    let iframeHtml = canvasObj.find('.answer-con-excel-container iframe'); // 獲取iframe內容
    let iframeBody = iframeHtml.contents().find('body')[0];
    html2canvas(iframeBody, {
        allowTaint: true,
        useCORS: true,
        width: 820, // TODO 截屏按照1920*1080分辨率下的預覽窗口寬高
        height: 800,
        x: 0,
        y: 0
    }).then(canvas => {
        // canvasObj.parent().find('.target-canvas-img-excel').attr('src', canvas.toDataURL('image/png', 1.0));
        canvasObj.parent().find('.canvas-wrapper .canvas-excel').append(canvas);
    })
}

 其中參數 width height 可根據效果進行增減