html2Canvas使用问题汇总

• 解决跨域图片不显示问题

使用html2Canvas导出的图片有时会显示不出来，根据 官网 的说法，只要设置useCORS 为 true，allowTaint 为 true 即可，如下：

new html2canvas(document.getElementById('test'), {
  backgroundColor: null,    //使用透明背景
  useCORS: true,            //是否允许使用跨域图片
  allowTaint: true,         //是否允许跨域的图片渲染到canvas
}).then(canvas => {
   // ……
});

就我的实际上还是不够的。。。后来试了另一位大佬的做法解决了问题（源文章）

我的情况是，图片地址是在阿里CDN服务器上

除了html2canvas官网的设置之外，还要做以下几步设置：

1.在网站的服务器上设置 access-control-allow-origin: *

2.在img标签中添加 crossorigin="anonymous" 属性

3.在src的图片地址后加上时间戳，如 :src=“xxx.png`?${ new Date().getTime() }`”

重新刷新页面，图片可显示了，导出的图片也没问题

• canvas内容渲染不全

当显示器窗口缩放出现滚动条时，html的内容渲染到canvas可能会出现渲染不全的问题。

其实是因为html2canvas内部会根据全局页面的情况，在渲染到canvas时自动偏移滚动距离 导致的。

解决方法：

把 scrollX 和 scrollY 都 设置为0 即可，如下图所示：

new html2canvas(document.getElementById('test'), {
  scrollX: 0, //渲染到canvas时x轴的滚动距离；不设置为0的话，渲染时会自动根据窗口大小滚动，导致渲染不全的现象
  scrollY: 0, //渲染到canvas时y轴的滚动距离；不设置为0的话，渲染时会自动根据窗口大小滚动，导致渲染不全的现象
}).then(canvas => {
   // ……
});