html2canvas snapshot invisible DOM in a scrollable div

要快照的 DOM 元素在滚动区域的底部

其他情况下都好好的, 为什么单单这种情况就有问题呢? 我猜测滚动区域内的 DOM 元素浏览器是"懒渲染"的, 既然还没有渲染出来, 那么就可以认为和 display:none 是一样的效果. 因此 html2canvas 获取这个 DOM 元素的像素数据时拿到的就会是一片空白了.

那么我们如何验证这个猜测呢? 就是要证实视野内可见元素才能快照到像素数据这个观点

• 滚动 DIV 元素到一定位置, 才能获取到要快照元素的图形数据 snapshotDirect

  不太灵活, 因为需要调整滚动条的位置

• clone 要快照的元素添加到 body 后再快照 snapshotClone2Body

  更改了 DOM 结构, 因此如果要快照的 DOM 元素的样式上有结构依赖, 例如 #container #snapshotme {color: red;} 就会出现快照图片与样式不符的问题

• 将快照的元素 absolute 后再快照 snapshotAbsolute

  如果滚动页面, 让快照的元素(因为父级已经滚动出了视野范围)在视野以外, 还是会出现快照不到像素数据的问题

• 将快照的元素 fixed 后再快照 snapshotFixed

  由于 fixed 确保元素是跟着浏览器窗口的滚动条走的, 因此元素始终会在视野范围内始终可见