在vue项目中html2canvas的使用和遇到的问题

一、关于html2canvas

介绍

html2canvas网址为：https://html2canvas.hertzen.com/documentation

脚本遍历加载页面的DOM元素的信息，然后将其用于构建页面的表示形式。换句话说，它实际上并不截取页面的屏幕截图，而是根据它从DOM读取的属性来构建页面的表示形式。

结果，它只能正确呈现它理解的属性，这意味着有许多CSS属性无效，受支持的CSS。

局限性

脚本使用的所有图片都必须位于相同的来源， 以便它无需代理即可读取它们。同样，如果canvas 页面上还有其他元素被跨域内容污染，它们将变脏并且无法被html2canvas读取。

浏览器兼容性

image

二、需求场景

业务需要前端页面内容生成特定的海报图片，然后分享到第三方供人浏览和传播。

三、在vue项目中的使用

1. 安装html2canvas

npm install --save html2canvas

2. 按需引入

在需要使用的页面中先引入html2canvas

import html2canvas from 'html2canvas'

3.在template模板中

配置要截图的内容，在截屏容器（最外层的元素）设置属性ref="imageTofile"，把要合成图片的内容都放进这个元素内部中。

4.在js中的配置

toImage方法实现html中的元素转换成图片,得到为base64格式的图片。

methods: {
    // 页面元素转图片
    toImage() {
        // 第一个参数是需要生成截图的元素,第二个是自己需要配置的参数,宽高等
        return html2canvas(this.$refs.imageTofile, {
            backgroundColor: null, // 背景颜色
            dpi: 192, // 将分辨率提高到特定的dpi,默认值为96
            scale: 2, // 用于渲染的比例尺。默认为浏览器设备像素比率。默认值是1，手机端设置成2
            useCORS:true, // 是否尝试使用CORS从服务器加载图像
        }).then((canvas) => {
            this.posterUrl = canvas.toDataURL('image/png')
        })
    },
},

这时得到的图片是个base64格式的字符，根据业务场景的需要进行后续的处理就可以了。

四、使用中遇到的问题

1.截图不全

(1)、当合成图片的元素过多的时候，调用toImage时，有可能元素还未加载或渲染完成，会造成截屏内容不全。

// 可以利用延时
setTimeout(() => {
    this.toImage()
}, 10)

(2)、页面滑动造成的，当html2canvas进行截图时，若内容高度高于body（或者说是屏幕视口）时，就会出现。

// 1、在生成截图前，先把滚动条置顶
window.pageYOffset = 0;
document.documentElement.scrollTop = 0
document.body.scrollTop = 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标签代替，否则合成出来的截图即使加上了上边的参数，也会模糊。