使用html2canvas遇到的问题

2023年6月20日发(作者：)

使⽤html2canvas遇到的问题html2canvas是前端很常⽤的截图库，以下整理以下如何使⽤html2canvas及使⽤它的过程⽬前遇到的问题⽬录⼀、简单使⽤1、项⽬中引⼊html2canvas//⽅式1： 直接script引⼊包// ⽅式2： 通过npm安装并使⽤import引⼊npm install html2canvas --saveimport html2canvas from 'html2canvas'2、基础使⽤

⼆、遇到的问题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：在截图之前，将页⾯的滚动条滚⾄顶部ffset = 0;Top = Top = 0html2canvas(mentById("container"), { width: 200, // 根据需求进⾏配置截图的尺⼨ height: 200, // 根据需求进⾏配置截图的尺⼨ allowTaint: false, useCORS: true, //图⽚跨域}).then(canvas => { const src = URL('image/png') mentById('imgId').setAttribute('src', src)})// ⽅式2：动态配置html2canvas的配置项：width、height、windowWidth、windowHeight、x、y (个⼈感觉这个⽐较难配置，需要⼀点⼀点得去调试配置)html2canvas(mentById("container"), { width: idth - 35, // 根据需求进⾏配置截图的尺⼨ height: eight - 276, // 根据需求进⾏配置截图的尺⼨ windowWidth: Width - 50, windowHeight: Height, x: 0, y: ffset + 40, allowTaint: false, useCORS: true, //图⽚跨域}).then(canvas => { const src = URL('image/png') mentById('imgId').setAttribute('src', src)})2、解决截图区域存在动态跨域图⽚，导致这部分区域截图空⽩问题（图⽚跨域问题）// ⽅式1：// step1： 在img元素中添加 crossOrigin="anonymous",使得跨域图⽚得请求header中会带上Origin属性，但不会带上cookie和客户端ssl证书等信息// step1： 配置 allowTaint、useCORS// step3：图⽚服务器配置 Access-Contorl-Allow-Origin: *// ⽅式2：直接让后台将跨域图⽚转成base64传给前端，然后再进⾏html2canvas截图3、解决兼容iOS遇到的问题1：IOS8只⽀持-webkit-flex布局，不⽀持flex布局// ⽅式1： 在需要截图的区域不使⽤flex布局// ⽅式2： 改html2canvas的源码，让 flex和-webkit-flex都设置相同的样式（即：返回 ）4、解决兼容iOS遇到的问题2：html2canvas v1.3.3版本在IOS13.4.1系统中调⽤失败// step1: 移除 html2canvas 【npm uninstall html2canvas】// step2： 项⽬的 中的 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属性

四、扩展1、兼容ios注意事项：① 不使⽤ flex 布局② 不动态⽣成 img 标签，只是修改器src属性③ ⼀定要使⽤html2canvas 版本 (重点注意)④ rc4版本不⽀持ssr，需要head的script引⼊或者动态导⼊：import (‘html2canvas’).then(({default: html2canvas}) => {})⑤ rc4版本在iOS端不⽀持css:LinearGradient! 会直接报错进⼊catch2、如果截图内容过多，或者是弹框截图，加上setTimeout延时器会有效解决截图空⽩问题** 如果⽇后遇到其他问题，会在此⽂中继续加以补充**

2023年6月20日发(作者：)

使⽤html2canvas遇到的问题html2canvas是前端很常⽤的截图库，以下整理以下如何使⽤html2canvas及使⽤它的过程⽬前遇到的问题⽬录⼀、简单使⽤1、项⽬中引⼊html2canvas//⽅式1： 直接script引⼊包// ⽅式2： 通过npm安装并使⽤import引⼊npm install html2canvas --saveimport html2canvas from 'html2canvas'2、基础使⽤

⼆、遇到的问题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：在截图之前，将页⾯的滚动条滚⾄顶部ffset = 0;Top = Top = 0html2canvas(mentById("container"), { width: 200, // 根据需求进⾏配置截图的尺⼨ height: 200, // 根据需求进⾏配置截图的尺⼨ allowTaint: false, useCORS: true, //图⽚跨域}).then(canvas => { const src = URL('image/png') mentById('imgId').setAttribute('src', src)})// ⽅式2：动态配置html2canvas的配置项：width、height、windowWidth、windowHeight、x、y (个⼈感觉这个⽐较难配置，需要⼀点⼀点得去调试配置)html2canvas(mentById("container"), { width: idth - 35, // 根据需求进⾏配置截图的尺⼨ height: eight - 276, // 根据需求进⾏配置截图的尺⼨ windowWidth: Width - 50, windowHeight: Height, x: 0, y: ffset + 40, allowTaint: false, useCORS: true, //图⽚跨域}).then(canvas => { const src = URL('image/png') mentById('imgId').setAttribute('src', src)})2、解决截图区域存在动态跨域图⽚，导致这部分区域截图空⽩问题（图⽚跨域问题）// ⽅式1：// step1： 在img元素中添加 crossOrigin="anonymous",使得跨域图⽚得请求header中会带上Origin属性，但不会带上cookie和客户端ssl证书等信息// step1： 配置 allowTaint、useCORS// step3：图⽚服务器配置 Access-Contorl-Allow-Origin: *// ⽅式2：直接让后台将跨域图⽚转成base64传给前端，然后再进⾏html2canvas截图3、解决兼容iOS遇到的问题1：IOS8只⽀持-webkit-flex布局，不⽀持flex布局// ⽅式1： 在需要截图的区域不使⽤flex布局// ⽅式2： 改html2canvas的源码，让 flex和-webkit-flex都设置相同的样式（即：返回 ）4、解决兼容iOS遇到的问题2：html2canvas v1.3.3版本在IOS13.4.1系统中调⽤失败// step1: 移除 html2canvas 【npm uninstall html2canvas】// step2： 项⽬的 中的 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属性

四、扩展1、兼容ios注意事项：① 不使⽤ flex 布局② 不动态⽣成 img 标签，只是修改器src属性③ ⼀定要使⽤html2canvas 版本 (重点注意)④ rc4版本不⽀持ssr，需要head的script引⼊或者动态导⼊：import (‘html2canvas’).then(({default: html2canvas}) => {})⑤ rc4版本在iOS端不⽀持css:LinearGradient! 会直接报错进⼊catch2、如果截图内容过多，或者是弹框截图，加上setTimeout延时器会有效解决截图空⽩问题** 如果⽇后遇到其他问题，会在此⽂中继续加以补充**