用html2canvas遇到因为有滚动条截图不完整问题的解决方法

官网：html2canvas - Screenshots with JavaScript

本文章向大家介绍在vue项目中用html2canvas遇到因为有滚动条截图不完整问题的解决方法(设置height和windowHeight)，需要的朋友可以参考一下。

1、安装

npm install html2canvas --save

2、使用

import html2canvas from 'html2canvas';

基本逻辑

html2canvas(document.getElementById('demo'), {
    backgroundColor: 'white',
    useCORS: true, //支持图片跨域
    scale: 2, //设置放大的倍数
}).then((canvas) => {
   // 生成图片导出
   const a = document.createElement('a');
   a.href = canvas.toDataURL('image/png');
   a.download = this.title;
   a.click();
})

高度问题主要逻辑（设置height，windowHeight）

翻html2canvas的文档,研究与高度相关的属性,最设置如下两个属性后问题就可以得到解决!

 html2canvas(document.getElementById('demo'), {
     backgroundColor: 'white',
     useCORS: true,
     scale: 1,
     height: document.getElementById('demo').scrollHeight,
     windowHeight: document.getElementById('demo').scrollHeight
})

出现的问题

1、背景图片模糊
解决方案：使用img标签来实现background-image的效果

2、图片无法渲染
在img标签内加入crossorigin=‘anonymous’（crossorigin='anonymous’可以触发带跨域请求头Origin的HTTP请求）并给html2canvas设置allowTaint: true配置

交流

1、QQ群：可添加qq群共同进阶学习： 进军全栈工程师疑难解  群号:   856402057

2、公众号：公众号「进军全栈攻城狮」 ，对前端技术保持学习爱好者。我会经常分享自己所学所看的干货，在进阶的路上，共勉！通过公众号可加我vx拉群

小红书