使用html2canvas生成截图分享榜单

html2canvas

1. 头像图片跨域问题（可使用代理转换图片的域名），并配置useCORS: true
2. svg格式的图片无法生成截图，尽量使用png、jpg图片，要用img标签，用背景图会模糊
3. 如果要预览截图，下面又是可滚动的区域，注意滚动穿透的问题(配置overflowY='hidden')
4. 设置z-index:-999的底图不要超出视口，不然会偶现掉落图片
5. 关于顶部白屏的问题: 因为是根据视口进行截图的，所以最好设置为fixed定位
6. 出现白边：html2canvas(dom, { useCORS: true, backgroundColor: '#3388ff' })设置个相近的背景颜色来盖住白色边缝隙。

// 获取想要转换的 DOM 节点
const dom = document.getElementById('id') as HTMLElement;

html2canvas(dom, { useCORS: true, backgroundColor: '#3388ff' })
  .then(canvas => {
    // 处理滚动穿透
    const wrapperDom = document.getElementById(
      'contribution-rank'
    ) as HTMLElement;
    wrapperDom.style.overflowY = 'hidden';

    let base64Img = canvas.toDataURL('image/png', 1.0);
    setSrc(base64Img);
    Toast.hide();
  })
  .catch(err => {
    console.log('html2canvas:', err, 1);
    Toast.fail('生成图片失败, 请重试', 1);
    Toast.hide();
  });