今天小编给大家带来的是html2canvas如何截取iframe中的内容,希望能帮助到大家!
工具/原料
PC
互联网
方法/步骤
1、首先,原页面代码非常复杂,无法完全还原代码。页面代码中涉及到了iframe、easyUI,tab标签。
2、当时使用tab标签分类显示的时候,当前选中模块显示内容,未选中模块内容设置为隐藏状态。而html2canvas插件无法识别隐藏的dom元素。
3、$("#downpdf").on("click",function(){//获取节点高度,后面为克隆节点设置高度。varheight=$(TargetNode).height()//克隆节点,默认为false,不复制方法属性,为true是全部复制。varcloneDom=$(TargetNode).clone(true);//设置克隆节点的css属性,因为之前的层级为0,我们只需要比被克隆的节点层级低即可。
4、cloneDom.css({"bac氯短赤亻kground-color":"臃扮哀坷white","position":"absolute","top":"0px","z-index":"-1","height":height});//将克隆节点动态追加到body后面。$("body").append(cloneDom);//插件生成base64img图片。html2canvas(cloneDom,{
5、//Whethertoallowcross-origi艘绒庳焰nimagestotaintthecanvas惺绅寨瞀allowTaint:true,//WhethertotesteachimageifittaintsthecanvasbeforedrawingthemtaintTest:false,onrendered:function(canvas){varimg=canvas.toDataURL('image/jpeg',1.0);//打印出来之后:data:image/jpeg;base64,/9j/4AAQSkZJRg....//可以通过chrome来查看console.log(img);}});});