Skip to content
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.

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

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

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open
Changes from 3 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
97 changes: 97 additions & 0 deletions index.html
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>
k7z45 marked this conversation as resolved.
Show resolved Hide resolved
</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>
k7z45 marked this conversation as resolved.
Show resolved Hide resolved
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>
k7z45 marked this conversation as resolved.
Show resolved Hide resolved

<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