官方文档

html2canvas - Screenshots with JavaScript (hertzen.com)

问题

css部分属性不支持

使用了重复线性渐变属性来实现背景效果

background: repeating-linear-gradient(-38.5deg, #cf010f 0px, #cf010f 10px, #d62833 10px, #d62833 20px);

但是截图后发现背景是空的，没有转成canvas，执行后的截图如下：

解决方法: 复杂的css样式用图片代替
当时和项目对接人员沟通后将背景改为了纯色，继续开发。

官方： 由于每个 CSS 属性都需要手动编码才能正确呈现，因此 html2canvas 永远不会具有完整的 CSS 支持。
以下是官方文档说明的不支持的css特征：

原因: 手动编码的原因和html2canvas的执行原理有关系,在官方文档里的How it works一栏里也有写。执行时遍历页面的DOM。收集所有有关元素的信息，然后在canvas中构建页面。实际上并没有截取页面的屏幕截图。
所以只能等官方更新支持，但是因为这个执行原理又出现了下面的问题

执行过程中的问题

因为执行时需要遍历页面dom，收集所有有关元素的信息，用来重新构建页面，所以在控制台的网络监听中会出现下面的情况（在上面的页面结构中加了一张网络图片）：

红色框中是页面首次加载的网络请求：html文件，图片资源，引入的html2canvas文件
而绿色框中请求是执行html2canvas时的请求，虽然是读取的缓存，但是这个请求也是证明了插件真的在收集所有元素的信息。

这个先时候先介绍下我的项目背景：
项目是移动端项目，技术栈是vue，显示出了日历，使用时需要截取14张图片（也就是插件需要执行14次）。而且是单页面项目，所以在项目中使用时会出现一个非常非常恐怖的现象： 这是过滤出了同一图片的请求，注意框起来的，一共354个请求，其中图片请求共267项全部走的缓存，js，和字体ttf文件请求各28项，全部都是304说明是浏览器的缓存机制向服务器发送了请求确认缓存没有改变可以继续使用，收到相应后使用了缓存。

这整个流程在正常情况下是没有问题的，执行时也没有大体积的请求，但是数量是真的太多了。
为什么特殊说明是正常情况下呢？因为不正常情况下出问题了。

当我们把网速设为slow 3G时结果如下：
图片还是走缓存没问题。

这时有两种特殊情况：1.连接失败 2.重复确认缓存，部分资源并没有走缓存，而是重新请求了资源回来。
解决思路
1.连接失败没想到办法，只能别限网速。
2.同样资源重复确认缓存。这种情况，我提出的解决方法是服务器去设置浏览器强缓存，而不是走协商缓存，比如给js文件和ttf文件的响应头设置Cache-Control值为max-age=1800，让浏览器在几分钟之内不去向浏览器询问缓存情况。

遗憾
本来是想找html2canvas的设置里有没有解决方法，需要遍历是理解的，但是如果需要同时截取多个dom时可以只遍历一遍页面就好了。

最后
这个问题是因为别的公司内部限制了网速才发现的，使用流量或者正常网速是正常使用的。但是这个一次这么多请求感觉还是很不合理。暂时没有找到好的解决方法。

缩放后文字样式扭曲

<style>
    #aaa{
        transform: scale(0.5);
    }
</style>
<div id="aaa">
    <span id="bbb">测试缩放</span>
</div>

当外层容器设置了缩放属性时，我们使用html2canvas截取内部dom，会出现文字没有缩放的效果，如下：
解决方法
文档配置中有一个属性onclone 值为一个函数，我们可以在这个函数中对其执行时克隆的文档进行操作

html2canvas(dom, {
  scale: 5,// 设置渲染比例
  onclone: documentClone => {
  // 执行时将克隆文档中的缩放改回正常值
    documentClone.getElementById('aaa').style.transform = 'scale(1)'
  }
})

添加配置后的截图效果如下:

比例恢复正常

与promise.all配合时的问题

在我对老版本html2cavans进行测试时出现了执行错误，控制台报错：No logger instance found
当用promise.all进行多次渲染时触发，出现频率很低
在GitHub中找到了该问题的Issues:github.com/niklasvh/ht…
并且新版本已经解决了这个问题
解决方法: 升级版本