对当前窗口进行截图并重复存储为数据，以保证画面重放和速度稳定

编程问答 2022-05-23

问题描述

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

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

但我不知道在 setInterval 函数中放什么才能捕获屏幕并将其存储在 pictures 数组中。我见过与 html2canvas 有关的东西，但我不知道如何使用它。

解决方法

<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>

我制作了一个代码笔来演示一个 JS 屏幕截图库。剪断的 Stackoverflow 不起作用。它在 codepen 上运行良好。取消注释 pics.push(url) 行以保存照片。它现在所做的就是以 ~60FPS 的速率更新图像。这在技术上不是录音，因为没有录音，但这是一个很好的错觉。

domhtmlhtml2canvasjavascriptwebpage-screenshot