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

在vue项⽬中html2canvas的使⽤和遇到的问题⼀、关于html2canvas介绍脚本遍历加载页⾯的DOM元素的信息，然后将其⽤于构建页⾯的表⽰形式。换句话说，它实际上并不截取页⾯的屏幕截图，⽽是根据它从DOM读取的属性来构建页⾯的表⽰形式。结果，它只能正确呈现它理解的属性，这意味着有许多CSS属性⽆效，受⽀持的CSS。局限性脚本使⽤的所有图⽚都必须位于相同的来源， 以便它⽆需代理即可读取它们。同样，如果canvas 页⾯上还有其他元素被跨域内容污染，它们将变脏并且⽆法被html2canvas读取。浏览器兼容性image⼆、需求场景业务需要前端页⾯内容⽣成特定的海报图⽚，然后分享到第三⽅供⼈浏览和传播。三、在vue项⽬中的使⽤1. 安装html2canvasnpm install --save html2canvas2. 按需引⼊在需要使⽤的页⾯中先引⼊html2canvasimport html2canvas from 'html2canvas'3.在template模板中配置要截图的内容，在截屏容器（最外层的元素）设置属性ref="imageTofile"，把要合成图⽚的内容都放进这个元素内部中。 4.在js中的配置toImage⽅法实现html中的元素转换成图⽚,得到为base64格式的图⽚。methods: { // 页⾯元素转图⽚ toImage() { // 第⼀个参数是需要⽣成截图的元素,第⼆个是⾃⼰需要配置的参数,宽⾼等 return html2canvas(this.$ofile, { backgroundColor: null, // 背景颜⾊ dpi: 192, // 将分辨率提⾼到特定的dpi,默认值为96 scale: 2, // ⽤于渲染的⽐例尺。默认为浏览器设备像素⽐率。默认值是1，⼿机端设置成2 useCORS:true, // 是否尝试使⽤CORS从服务器加载图像 }).then((canvas) => { Url = URL('image/png') }) },},这时得到的图⽚是个base64格式的字符，根据业务场景的需要进⾏后续的处理就可以了。四、使⽤中遇到的问题1.截图不全(1)、当合成图⽚的元素过多的时候，调⽤toImage时，有可能元素还未加载或渲染完成，会造成截屏内容不全。// 可以利⽤延时setTimeout(() => { e()}, 10)(2)、页⾯滑动造成的，当html2canvas进⾏截图时，若内容⾼度⾼于body（或者说是屏幕视⼝）时，就会出现。// 1、在⽣成截图前，先把滚动条置顶ffset = 0;Top = Top = 0// 2、或者让合成图⽚的部分元素从顶部往下正常排版，然后不让其内容滚动。// ⼀般在使⽤时，如果合成部分内容简单，可以⾃⼰写好要合成的样式，调整元素层级，使其隐藏在页⾯不可见即可。2.截图部分⽩屏或⿊屏这种情况的出现有可能是因为合成图⽚内的元素有跨域的资源，就会造成这种情况出现，导致合成失败。html2canvas中配置 allowTaint:true 或 useCORS:true（我⽤的useCORS:true）跨域资源图⽚服务器配置Access-Control-Allow-Origin 或使⽤代理，（通过后台⼩伙伴配置了图⽚所在服务器的响应头信息，所以本⼈没有⽤到代理的⽅式来处理）3.截图后图⽚模糊// html2canvas中配置两个配置项,`scale`和`dpi`，经测试使⽤如下参数即可 dpi: 192, // 将分辨率提⾼到特定的dpi,默认值为96 scale: 2, // ⽤于渲染的⽐例尺。默认为浏览器设备像素⽐率。默认值是1，⼿机端设置成2// 还有⼀点就是当合成元素中有背景图⽚的部分，都换成⽤img标签代替，否则合成出来的截图即使加上了上边的参数，也会模糊。

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

在vue项⽬中html2canvas的使⽤和遇到的问题⼀、关于html2canvas介绍脚本遍历加载页⾯的DOM元素的信息，然后将其⽤于构建页⾯的表⽰形式。换句话说，它实际上并不截取页⾯的屏幕截图，⽽是根据它从DOM读取的属性来构建页⾯的表⽰形式。结果，它只能正确呈现它理解的属性，这意味着有许多CSS属性⽆效，受⽀持的CSS。局限性脚本使⽤的所有图⽚都必须位于相同的来源， 以便它⽆需代理即可读取它们。同样，如果canvas 页⾯上还有其他元素被跨域内容污染，它们将变脏并且⽆法被html2canvas读取。浏览器兼容性image⼆、需求场景业务需要前端页⾯内容⽣成特定的海报图⽚，然后分享到第三⽅供⼈浏览和传播。三、在vue项⽬中的使⽤1. 安装html2canvasnpm install --save html2canvas2. 按需引⼊在需要使⽤的页⾯中先引⼊html2canvasimport html2canvas from 'html2canvas'3.在template模板中配置要截图的内容，在截屏容器（最外层的元素）设置属性ref="imageTofile"，把要合成图⽚的内容都放进这个元素内部中。 4.在js中的配置toImage⽅法实现html中的元素转换成图⽚,得到为base64格式的图⽚。methods: { // 页⾯元素转图⽚ toImage() { // 第⼀个参数是需要⽣成截图的元素,第⼆个是⾃⼰需要配置的参数,宽⾼等 return html2canvas(this.$ofile, { backgroundColor: null, // 背景颜⾊ dpi: 192, // 将分辨率提⾼到特定的dpi,默认值为96 scale: 2, // ⽤于渲染的⽐例尺。默认为浏览器设备像素⽐率。默认值是1，⼿机端设置成2 useCORS:true, // 是否尝试使⽤CORS从服务器加载图像 }).then((canvas) => { Url = URL('image/png') }) },},这时得到的图⽚是个base64格式的字符，根据业务场景的需要进⾏后续的处理就可以了。四、使⽤中遇到的问题1.截图不全(1)、当合成图⽚的元素过多的时候，调⽤toImage时，有可能元素还未加载或渲染完成，会造成截屏内容不全。// 可以利⽤延时setTimeout(() => { e()}, 10)(2)、页⾯滑动造成的，当html2canvas进⾏截图时，若内容⾼度⾼于body（或者说是屏幕视⼝）时，就会出现。// 1、在⽣成截图前，先把滚动条置顶ffset = 0;Top = Top = 0// 2、或者让合成图⽚的部分元素从顶部往下正常排版，然后不让其内容滚动。// ⼀般在使⽤时，如果合成部分内容简单，可以⾃⼰写好要合成的样式，调整元素层级，使其隐藏在页⾯不可见即可。2.截图部分⽩屏或⿊屏这种情况的出现有可能是因为合成图⽚内的元素有跨域的资源，就会造成这种情况出现，导致合成失败。html2canvas中配置 allowTaint:true 或 useCORS:true（我⽤的useCORS:true）跨域资源图⽚服务器配置Access-Control-Allow-Origin 或使⽤代理，（通过后台⼩伙伴配置了图⽚所在服务器的响应头信息，所以本⼈没有⽤到代理的⽅式来处理）3.截图后图⽚模糊// html2canvas中配置两个配置项,`scale`和`dpi`，经测试使⽤如下参数即可 dpi: 192, // 将分辨率提⾼到特定的dpi,默认值为96 scale: 2, // ⽤于渲染的⽐例尺。默认为浏览器设备像素⽐率。默认值是1，⼿机端设置成2// 还有⼀点就是当合成元素中有背景图⽚的部分，都换成⽤img标签代替，否则合成出来的截图即使加上了上边的参数，也会模糊。