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是不是不支持这些选项。
