使用html2canvas 生成的海报

 html2canvas(document.getElementById(POSTER_ID), {
      allowTaint: true,
      useCORS: true,
      scrollY:0
    }).then((canvas) => {
      const a = document.createElement('a');
      a.download = '优惠券推广海报';
      a.href = canvas.toDataURL('image/png');
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
    });

正常的海报是这样的

图片无法显示

然而我生成的是这样的

因为我的图片时直接引用有赞的，一顿操作后，再TS定义文件中找到两个配置

  allowTaint: true,
  useCORS: true,

图片上面会出现空白

而且这个空白时大时小

因为是在弹出框内，一顿操作后，我才发现是因为页面发生了滚动....
只需要加上

  scrollY:0

结语

当时在网上找答案，发现解决方式都很繁琐。
比如第一个问题，有说道自己转换为base64的。

第二个问题有说记录滚动的位置，生成之后再滚动回去之类的。
不知道当时的html2canvas是不是不支持这些选项。