Skip to content

Proposing a get endpoint for Take Screenshot that with fullpage option #1536

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Proposing a get endpoint for Take Screenshot that with fullpage option #1536

Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f37036b
Proposing a post endpoint for Take Screenshot that with fullpage option
k7z45 Jul 16, 2020
e134c44
Use GET with /screenshot/full instead
k7z45 Jul 17, 2020
16a640d
Simplify wording and width/height calculation
k7z45 Sep 22, 2020
1a802aa
Moved Take Full Screenshot right after Take Screenshot
k7z45 Nov 30, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
97 changes: 97 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1016,6 +1016,12 @@ <h3>Endpoints</h3>
<td><a>Take Element Screenshot</a></td>
</tr>

<tr>
<td>GET</td>
<td>/session/{<var>session id</var>}/screenshot/full</td>
<td><a>Take Full Page Screenshot</a></td>
</tr>

<tr>
<td>POST</td>
<td>/session/{<var>session id</var>}/print</td>
Expand Down Expand Up @@ -9035,6 +9041,8 @@ <h2>Screen capture</h2>
and a <a>command</a> <a>Take Element Screenshot</a>
for doing the same with the visible region of an <a>element</a>’s
<a>bounding rectangle</a> after it has been <a>scrolled into view</a>.
It also provides a <a>Take Full Page Screenshot</a> <a>command</a>
to capture the scrollable region of the <a>top-level browsing context</a>’s <a>scrolling element</a>

<p>In order to <dfn>draw a bounding box from the framebuffer</dfn>,
given a <a>rectangle</a>:
Expand Down Expand Up @@ -9082,6 +9090,45 @@ <h2>Screen capture</h2>
<li><p>Return <a>success</a> with <var>canvas</var>.
</ol>

<p>In order to <dfn>draw a scrollable region from the framebuffer</dfn>,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What exactly is that part about? Is it for the document element, or a child node? For child nodes we have Take Element Screenshot. Otherwise check you do below we already have at the top of the former list.

I feel we don't have to repeat all the steps again.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is for describing taking the screenshot for the full page instead of only the visible viewport.
It's for document.scrollingElement.
I did not use "draw a bounding box from the framebuffer" because I think step 2 and step 3
do not satisfy the requirement for full page screenshot.

"2. Let paint width be the initial viewport’s width – min(rectangle x coordinate, rectangle x coordinate + rectangle width dimension).
3. Let paint height be the initial viewport’s height – min(rectangle y coordinate, rectangle y coordinate + rectangle height dimension)."

Notice the - denotes the minus sign, so I think for Take Screenshot and Take Element Screenshot, the width and height will not be greater than the visible viewport's width and height but the full page screenshot takes the document.scrollingElement.scrollWidth and scrollHeight which can be greater. So I removed step 2 and 3 and uses the scrollWidth and Height directly for paint width and height.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@whimboo Could you take a look, please?

given a <a>scrolling element</a>:

<ol>
<li><p>If either the <a>initial viewport</a>’s width or height
is 0 <a>CSS pixels</a>,
return <a>error</a> with <a>error code</a> <a>unable to capture screen</a>.

<li><p>Let <var>canvas</var> be a new <a><code>canvas</code> element</a>,
and set its <a data-lt="canvas width attribute">width</a>
and <a data-lt="canvas height attribute">height</a>
to <a>scrolling element</a> <a>scrollWidth</a> and <a>scrollHeight</a>, respectively.

<li><p>Let <var>context</var>, a <a>canvas context mode</a>,
be the result of invoking the <a>2D context creation algorithm</a>
given <var>canvas</var> as the target.

<li><p>Complete implementation specific steps equivalent to
drawing the region of the framebuffer
specified by the following coordinates onto <var>context</var>:

<dl>
<dt>X coordinate
<dd>0

<dt>Y coordinate
<dd>0

<dt>Width
<dd><a>scrolling element</a> <a>scrollWidth</a>

<dt>Height
<dd><a>scrolling element</a> <a>scrollHeight</a>
</dl>

<li><p>Return <a>success</a> with <var>canvas</var>.
</ol>


<p>To <dfn data-lt="encoding a canvas as base64">encode a canvas as
Base64 a <code>canvas</code> <a>element</a></dfn>:

Expand Down Expand Up @@ -9215,6 +9262,47 @@ <h3><dfn>Take Element Screenshot</dfn></h3>
<li><p>Return <a>success</a> with data <var>encoded string</var>.
</ol>
</section> <!-- /Take Element Screenshot -->

<section>
<h3><dfn>Take Full Page Screenshot</dfn></h3>

<table class="simple jsoncommand">
<tr>
<th>HTTP Method</th>
<th>URI Template</th>
</tr>
<tr>
<td>GET</td>
<td>/session/{<var>session id</var>}/screenshot/full</td>
</tr>
</table>

<p>The <a>remote end steps</a> are:

<ol>
<li><p>If the <a>current top-level browsing context</a> is <a>no longer open</a>,
return <a>error</a> with <a>error code</a> <a>no such window</a>.

<li><p>When the user agent is next to <a>run the animation frame callbacks</a>:
<ol>

<li><p>Let <var>screenshot result</var> be the result of <a>trying</a> to call
<a>draw a scrollable region from the framebuffer</a>,
given <a>scrolling element</a> as an argument.

<li><p>Let <var>canvas</var> be a <a><code>canvas</code> element</a>
of <var>screenshot result</var>’s data.

<li><p>Let <var>encoding result</var> be the result of <a>trying</a>
<a>encoding a canvas as Base64</a> <var>canvas</var>.

<li><p>Let <var>encoded string</var> be <var>encoding result</var>’s data.
</ol>

<li><p>Return <a>success</a> with data <var>encoded string</var>.
</ol>

</section> <!-- /Take Screenshot with option -->
</section> <!-- /Screen capture -->

<section>
Expand Down Expand Up @@ -10111,6 +10199,15 @@ <h2>Index</h2>
sometimes here referred to as the <i>viewport</i>.
</ul>

<dd>The following terms are defined in
the CSSOM View Module: [[CSSOM-VIEW]]
<ul>
<!-- scrolling element --><li><dfn><a href=https://www.w3.org/TR/cssom-view-1/#dom-document-scrollingelement>Scrolling element</a></dfn>

<!-- scrollWidth --> <li><dfn><a href=https://www.w3.org/TR/cssom-view-1/#dom-element-scrollwidth>scrollWidth</a></dfn>
<!-- scrollHeight --> <li><dfn><a href=https://www.w3.org/TR/cssom-view-1/#dom-element-scrollheight>scrollHeight</a></dfn>
</ul>

<dd>The following properties are defined in
the CSS Display Module Level 3 specification: [[CSS3-DISPLAY]]
<ul>
Expand Down