对当前窗口进行截图，并作为数据反复存储，以便屏幕重放，速度稳定

Question

我正在制作一个HTML/JS文档，我需要一种方法来拍摄每帧屏幕的照片并将其存储在数组中，这样它基本上就像屏幕记录一样。但我不知道该怎么做。我的想法是这样的:

var pictures = [];
setInterval(function() {
pictures.push(/**something here**/);
}, 1);

但是我不知道该把什么放在setInterval函数中，以便它捕获屏幕并将其存储在pictures数组中。我看到一些与html2canvas有关的东西，但我不知道如何使用它。

Answer 1

<p class="codepen" data-height="558" data-theme-id="dark" data-default-tab="js,result" data-user="sojs_coder" data-slug-hash="BaQYxRX" data-preview="true" style="height: 558px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Screenshot JS">
<span>See the Pen <a href="https://codepen.io/sojs_coder/pen/BaQYxRX">
Screenshot JS</a> by So JS (<a href="https://codepen.io/sojs_coder">@sojs_coder</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

我做了一个codepen演示JS截图库。Stackoverflow截断不工作。它在相互依赖上工作得很好。取消pics.push(url)行注释以保存照片。它现在所做的就是以60FPS的速度更新图像。从技术上讲，这不是录音，因为没有任何记录，但这是一个相当好的错觉。