使用html2canvas插件截图不全的问题,亲测有效!!!

在处理之前,如果页面很长(伴有滚动条),只能截取到当前区域,那这样肯定是不可取的。所以就用了如下方法:

window.pageYoffset = 0;

document.documentElement.scrollTop = 0;

document.body.scrollTop = 0;

要点是主要是html2canvas根据body进行截图,若内容高度高于body时,就会出现这样的问题,所以解决方案就是在生成截图前,先把滚动条置顶!!!

顺便说一下使用html2canvas的方法

html2canvas可以通过获取html某个元素,然后生成Canvas,能让用户保存为图片

查看官网: http://html2canvas.hertzen.com/

使用方法: npm install --save html2canvas / yarn add html2canvas

html2canvas(你所要截图的区域, {

配置一些参数,比如,图片跨域allowTaint: true,需要的具体查看官网

}) .then(canvas=> {

//对canvas进行操作,如果需要保存在本地,就需要将canvas转化成图片

var pageData = canvas.toDataURL('image/jpeg', 1.0);

})

完整示例代码:

import html2canvas from 'html2canvas';

capture () {

window.pageYoffset = 0;

document.documentElement.scrollTop = 0;

document.body.scrollTop = 0;

html2canvas(document.getElementById('capture'), {

allowTaint: true

})

.then(canvas=> {

var pageData = canvas.toDataURL('image/jpeg', 1.0);

saveFile(pageData.replace("image/jpeg", "image/octet-stream"),new Date().getTime()+".jpeg");

})

}

如果.then报错,

html2canvas(document.getElementById('capture'), {

onrendered: function (canvas) {

var url = canvas.toDataURL();

},

allowTaint: true

})

/**

* 在本地进行文件保存

* @param {String} data 要保存到本地的图片数据

* @param {String} filename 文件名

*/

saveFile (data, filename){

var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');

save_link.href = data;

save_link.download = filename;

var event = document.createEvent('MouseEvents');

event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);

save_link.dispatchEvent(event);

};

文件参考: https://blog.csdn.net/u012667477/article/details/82020315

https://www.jianshu.com/p/88f07d5c5c70