使⽤html2canvas遇到的问题html2canvas是前端很常⽤的截图库，以下整理以下如何使⽤html2canvas及使⽤它的过程⽬前遇到的问题⽬录
⼀、简单使⽤
1、项⽬中引⼊html2canvas
//⽅式1：直接script引⼊包
<script src="js/html2canvas.js"></script>
// ⽅式2：通过npm安装并使⽤import引⼊
npm install html2canvas --save
import html2canvas from 'html2canvas'
2、基础使⽤
<div id="container">
需要截图的部分
</div>
<img id="imgId">
<script>
ElementById("container"), {
width: 200, // 根据需求进⾏配置截图的尺⼨
height: 200, // 根据需求进⾏配置截图的尺⼨
allowTaint: false,
useCORS: true, //图⽚跨域
dpi: 300,  //解决⽣产图⽚模糊
backgroundColor: "#fff", // ⼀定要添加背景颜⾊，否则出来的图⽚，背景全部都是透明的
}).then(canvas =>{
const src = DataURL('image/png')
})
</script>
⼆、遇到的问题
1、页⾯存在滚动条的情况下，截图不全的问题
2、截图区域存在动态跨域图⽚，导致这部分区域截图空⽩问题（图⽚跨域问题）
3、兼容iOS遇到的问题1：IOS8只⽀持-webkit-flex布局，不⽀持flex布局
4、兼容iOS遇到的问题2：html2canvas v1.3.3版本在IOS13.4.1系统中调⽤失败
5、兼容iOS遇到的问题3：html2canvas截图后渲染在动态⽣成 img 标签⽆效
三、问题解决
1、解决页⾯存在滚动条的情况下，截图不全的问题（如果是截图内容多，⼀下⼦⽆法加载出来导致截图空⽩，可以适当使⽤延时器setTimeout()）
// ⽅式1：在截图之前，将页⾯的滚动条滚⾄顶部
window.pageYOffset =0;
document.documentElement.scrollTop =0
document.body.scrollTop =0
ElementById("container"), {
width: 200, // 根据需求进⾏配置截图的尺⼨
height: 200, // 根据需求进⾏配置截图的尺⼨
allowTaint: false,
useCORS: true, //图⽚跨域
}).then(canvas =>{
const src = DataURL('image/png')
})
// ⽅式2：动态配置html2canvas的配置项：width、height、windowWidth、windowHeight、x、y (个
⼈感觉这个⽐较难配置，需要⼀点⼀点得去调试配置) ElementById("container"), {
width: window.screen.availWidth - 35, // 根据需求进⾏配置截图的尺⼨
height: window.screen.availHeight - 276,  // 根据需求进⾏配置截图的尺⼨
windowWidth: document.body.scrollWidth - 50,
windowHeight: document.body.scrollHeight,
x: 0,
y: window.pageYOffset + 40,
allowTaint: false,
useCORS: true, //图⽚跨域
}).then(canvas =>{
const src = DataURL('image/png')
})
2、解决截图区域存在动态跨域图⽚，导致这部分区域截图空⽩问题（图⽚跨域问题）
// ⽅式1：
// step1：在img元素中添加crossOrigin="anonymous"，使得跨域图⽚得请求header中会带上Origin属性，但不会带上cookie和客户端ssl证书等信息
<div id="container">
需要截图的部分
<img src="192.168.11.22/img/1111.png"  crossOrigin ="anonymous"/>
</div>
<img id="imgId">
// step1：配置 allowTaint、useCORS
<script>
ElementById("container"), {
width: 200, // 根据需求进⾏配置截图的尺⼨
height: 200, // 根据需求进⾏配置截图的尺⼨
allowTaint: false, // 允许跨原始图像污染画布
useCORS: true, //尝试使⽤CORS从服务器加载图像
}).then(canvas =>{
const src = DataURL('image/png')
html的flex布局})
</script>
/
/ step3：图⽚服务器配置 Access-Contorl-Allow-Origin: *
// ⽅式2：直接让后台将跨域图⽚转成base64传给前端，然后再进⾏html2canvas截图
3、解决兼容iOS遇到的问题1：IOS8只⽀持-webkit-flex布局，不⽀持flex布局
// ⽅式1：在需要截图的区域不使⽤flex布局
// ⽅式2：改html2canvas的源码，让 flex和-webkit-flex都设置相同的样式（即：返回DISPLAY.FLEX）
4、解决兼容iOS遇到的问题2：html2canvas v1.3.3版本在IOS13.4.1系统中调⽤失败
// step1: 移除 html2canvas 【npm uninstall html2canvas】
// step2：项⽬的package.json 中的 html2canvas 版本降低为【1.0.0-rc.4】---  "html2canvas":"^1.0.0-rc.4"
// step3：安装1.0.0-rc.4版本【npm install --save html2canvas@1.0.0-rc.4】
5、兼容iOS遇到的问题3：html2canvas截图后渲染在动态⽣成 img 标签⽆效
// 不动态⽣成 img 标签，只是修改器src属性
<div id="container">
需要截图的部分
</div>
<img id="imgId">
<script>
ElementById("container"), {
width: 200, // 根据需求进⾏配置截图的尺⼨
height: 200, // 根据需求进⾏配置截图的尺⼨
allowTaint: false,
useCORS: true, //图⽚跨域
}).then(canvas =>{
const src = DataURL('image/png')
})
</script>
四、扩展
1、兼容ios注意事项：
① 不使⽤ flex 布局
② 不动态⽣成 img 标签，只是修改器src属性
③ ⼀定要使⽤html2canvas 1.0.0-rc.4.js版本 (重点注意)
④ rc4版本不⽀持ssr，需要head的script引⼊或者动态导⼊：import (‘html2canvas’).then(({default: html2canvas}) => {})
⑤ rc4版本在iOS端不⽀持css:LinearGradient! 会直接报错进⼊catch
2、如果截图内容过多，或者是弹框截图，加上setTimeout延时器会有效解决截图空⽩问题
** 如果⽇后遇到其他问题，会在此⽂中继续加以补充**

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。