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 可根据效果进行增减

posted @   study_php_java_C++  阅读(3576)  评论(0编辑  收藏  举报
编辑推荐:
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
历史上的今天:
2020-06-18 symfony2中mysql和mongodb的增删改查总结
2020-06-18 symfony2 数据库原生查询
2020-06-18 MySql WorkBench通过表生成表关系图
点击右上角即可分享
微信分享提示