html2canvas ios 报错 Maximum call stack size exceeded

踩坑记录 / 经验
  185字   1分钟

最近的一个微信 h5 项目，有生成分享图的需求，用到了 html2canvas 这个库

代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
let el = document.querySelector('.xxx');
html2canvas(el, {
  width: el.offsetWidth,
  height: el.offsetHeight,
  scale: 2,
  dpi: window.devicePixelRatio * 2,
  useCORS: true,
})
.then(canvas => {
  this.coverImg = canvas.toDataURL('image/png', 1.0);
})
.catch(err => {
  console.log('报错了', err);
})

安卓能正常生成，ios 报错了，错误信息是：

1
2
3
4
column: 46
line: 150
message: "Maximum call stack size exceeded."
stack: "fromCodePoint consumeStringSlice consumeStringToken consumeUrlToken read parse CSSParsedDeclaration ElementContainer createContainer parseTree step fulfilled promiseReactionJob@[native code]"

为什么会报这个错，咱也不知道，在网上找到一篇文章，说到了这个问题，说是 css 背景图导致的，于是我把背景图换成了 img 标签，就没报错能正常生成了

参考：https://my.oschina.net/ihh/blog/4635402