官网文档: 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 可根据效果进行增减

html2canvas实现截取指定区域或iframe的区域的更多相关文章

  1. CentOS7之按时间段截取指定的Tomcat日志到指定文件的方法

    CentOS7之按时间段截取指定的Tomcat日志到指定文件的方法 sed -n '/2016-11-02 15:00:/,/2016-11-02 15:05:/p' catalina.out > ...

  2. asp.net截取指定长度的字符串内容

    /// <summary> /// 用于截取指定长度的字符串内容 /// </summary> /// <param name="sString"&g ...

  3. [转]c#截取指定长度的字符串

    /// <summary> /// 截取指定長度的字符串 /// </summary> /// <param name="s"></par ...

  4. php截取指定字符串之间的字符串的类

    一个php截取指定字符串之间的字符串的类 <?php   class get_c_str {   var $str;   var $start_str;   var $end_str;   va ...

  5. JS 实现 ResizeBar,可拖动改变两个区域(带iframe)大小

    将网页化成两个区域,左边区域是一个树结构,右边区域是一个iframe,点击左边区域时,右边区域加载页面.实现功能:在两个区域间加一个可拖动条,拖动时改变左右两个区域的大小.在Google上搜索slid ...

  6. .net截取指定长度汉字超出部分以指定的字符代替

    下面是我在网上搜索,然后加以整理的关于在.net中截取指定长度汉字超出部分以指定的字符代替,来拓展一下自己的思路. 方法一 :在后台的select语句中直接操作或是在数据库中写一个存储过程 Selec ...

  7. js实现超过长度的字符截取指定长度(中文字符算2个字符),超出部分以...显示

    //超过长度的字符截取指定长度,超出部分以...显示 function subString(str, len) { var newLength = 0; var newStr = "&quo ...

  8. sql中从指定位置截取指定长度字符串

    1. 字符串函数应用 --从指定索引截取指定长度的字符串 ,) --获取字符串中指定字符的索引(从1开始) select charindex(',','ab,cdefg') --实际应用中的语句 , ...

  9. Oracle 截取指定长度的字符

    去掉回车,换行符号,截取指定长度的字符 具体代码示例: --Function --去掉前后空格,截取字符,字符长度为P_Length create or replace function get_St ...

随机推荐

  1. 阿里云NAS文件迁移项目实践

    阿里云文件存储NAS是阿里云推出的用于传统文件共享的,使用NFS协议挂载的共享文件夹. 产品背景 下图是NAS和阿里云另一明星产品OSS以及块存储EBS的区别 NAS核心优势:无需修改程序,挂载之后, ...

  2. labuladong 05.16 微信直播

    labuladong 05.16 微信直播 一.基础: 1.校招相关 1)扫盲 秋招:8-10月 提前批:7月 暑期实习:3-5月 非必须 2)关注公司前景,部门信息,公司财报 企查查,天眼查,多获取 ...

  3. docker部署minio

    快速部署 docker run -p 9000:9000 --name myminio \ -e "MINIO_ACCESS_KEY=AKIAIOSFODNN7EXAMPLE" \ ...

  4. SQL:多表查询

    参考网址: https://zhuanlan.zhihu.com/p/91973413 此次主要介绍多表查询中的三部分:合并查询结果.连接查询(交叉连接.内连接.左连接.右连接.全连接)和CASE表达 ...

  5. 堆排序——Java实现

    一.堆排序 堆排序(Heap Sort)是指利用堆这种数据结构所设计的一种排序算法.堆是一个近似完全二叉树的结构,并同时满足堆积的性质:即子结点的键值或索引总是小于(或者大于)它的父节点. 二.堆 什 ...

  6. HashTable原理和底层实现

    1. 概述 上次讨论了HashMap的结构,原理和实现,本文来对Map家族的另外一个常用集合HashTable进行介绍.HashTable和HashMap两种集合非常相似,经常被各种面试官问到两者的区 ...

  7. C# volatile 的使用

    class Program { private static volatile bool bChanged; static void Main(string[] args) { Thread t1 = ...

  8. AAC简介

    AAC共有9种规格,以适应不同的场合的需要: MPEG-2 AAC LC 低复杂度规格(Low Complexity)--比较简单,没有增益控制,但提高了编码效率,在中等码率的编码效率以及音质方面,都 ...

  9. NLP与深度学习(二)循环神经网络

    1. 循环神经网络 在介绍循环神经网络之前,我们先考虑一个大家阅读文章的场景.一般在阅读一个句子时,我们是一个字或是一个词的阅读,而在阅读的同时,我们能够记住前几个词或是前几句的内容.这样我们便能理解 ...

  10. ASP截取字符 截取字符之间的字符

    ASP截取字符:MID函数Mid(变量或字串符,开始字节, 结尾字节(可不填)) InStrRev(变量, "字串符")  最后出现位置InStr(变量, "字串符&qu ...