首先说明下需求:
在预览详情页时,要将预览页通过点击事件保存为图片
遇到的问题:
在使用了html2canvas插件后,出现了只能截取可视区域的页面的状况
解决方案:
根据需求页面需在加载完成后直接生成幕布,后期通过点击事件直接下载即可
$(function(){
var targetDom = $("#printInfo");
var copyDom = targetDom.clone();
copyDom.width(targetDom.width() + "px");
copyDom.height(targetDom.height() + "px");
$('body').append(copyDom);
html2canvas(copyDom, {
allowTaint: true,
taintTest: false,
onrendered : function(canvas) {
imgData = canvas.toDataURL(type);
}
});
})
首先是获取你要截取页面的父div,通过clone并紧随于body之后,在生成幕布的时候不再拿着父div去截取,而是截取clone的div,这样的话,就可以实现整个页面的截取了。