Question

我有一个需求，我需要拍摄视口的屏幕截图并在以后使用。

问题是，用户可以与页面进行交互并添加/删除元素。除此之外，如果某个元素是部分可见的，则只需要捕获即可。

我尝试过

HTML2Canvas
WebRTC

此HTML2Canvas的问题截图了一个元素。因此，如果元素的一部分不可见，即使添加了该元素。

WebRTC的问题是，首先它需要用户的许可。因此，如果用户拒绝，我的代码将失败。除此之外，它还需要整个屏幕的屏幕截图，而不仅仅是视口。

那么，有没有办法获取视口的屏幕截图？

敌人示例，在下面的示例中，如果在SO的输出窗口中运行，则会看到滚动。因此，鉴于位于顶部的位置，我只想捕获可见的内容，而不是整个div。

HTML2Canvas fiddle

.container {
  display: flex;
  flex-direction: row;
}

.container > div {
  padding: 5px;
  margin: 5px;
  border: 1px solid gray;
  font-size: 2em;
}

<div class='container'>
  <div>
    Paragraphs are the building blocks of papers. Many students define paragraphs in terms of length: a paragraph is a group of at least five sentences, a paragraph is half a page long, etc. In reality, though, the unity and coherence of ideas among sentences is what constitutes a paragraph. A paragraph is defined as “a group of sentences or a single sentence that forms a unit” (Lunsford and Connors 116). Length and appearance do not determine whether a section in a paper is a paragraph. For instance, in some styles of writing, particularly journalistic styles, a paragraph can be just one sentence long. Ultimately, a paragraph is a sentence or group of sentences that support one main idea. In this handout, we will refer to this as the “controlling idea,” because it controls what happens in the rest of the paragraph.
  </div>
  <div>
    Paragraphs are the building blocks of papers. Many students define paragraphs in terms of length: a paragraph is a group of at least five sentences, a paragraph is half a page long, etc. In reality, though, the unity and coherence of ideas among sentences is what constitutes a paragraph. A paragraph is defined as “a group of sentences or a single sentence that forms a unit” (Lunsford and Connors 116). Length and appearance do not determine whether a section in a paper is a paragraph. For instance, in some styles of writing, particularly journalistic styles, a paragraph can be just one sentence long. Ultimately, a paragraph is a sentence or group of sentences that support one main idea. In this handout, we will refer to this as the “controlling idea,” because it controls what happens in the rest of the paragraph.
  </div>
</div>

我的研究参考

拍摄视口的屏幕截图

0 个答案: