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.

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

Expose image orientation metadata on HTMLImageElement #5603

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Expose image orientation metadata on HTMLImageElement #5603

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
81 changes: 80 additions & 1 deletion source
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25882,6 +25882,8 @@ interface <dfn>HTMLImageElement</dfn> : <span>HTMLElement</span> {
[<span>CEReactions</span>] attribute unsigned long <span data-x="dom-img-height">height</span>;
readonly attribute unsigned long <span data-x="dom-img-naturalWidth">naturalWidth</span>;
readonly attribute unsigned long <span data-x="dom-img-naturalHeight">naturalHeight</span>;
readonly attribute unsigned long <span data-x="dom-img-intrinsicOrientationAngle">intrinsicOrientationAngle</span>;
readonly attribute boolean <span data-x="dom-img-intrinsicOrientationFlip">intrinsicOrientationFlip</span>;
readonly attribute boolean <span data-x="dom-img-complete">complete</span>;
readonly attribute USVString <span data-x="dom-img-currentSrc">currentSrc</span>;
[<span>CEReactions</span>] attribute DOMString <span data-x="dom-img-referrerPolicy">referrerPolicy</span>;
Expand Down Expand Up @@ -26216,6 +26218,14 @@ interface <dfn>HTMLImageElement</dfn> : <span>HTMLElement</span> {
or zero if the dimensions are not known.</p>
</dd>

<dt><var>image</var> . <code subdfn data-x="dom-img-intrinsicOrientationAngle">intrinsicOrientationAngle</code></dt>
<dt><var>image</var> . <code subdfn data-x="dom-img-intrinsicOrientationFlip">intrinsicOrientationFlip</code></dt>

<dd>
<p>These attributes return the orientation metadata of the image, or zero and false if there is
none.</p>
</dd>

<dt><var>image</var> . <code subdfn data-x="dom-img-complete">complete</code></dt>

<dd>
Expand Down Expand Up @@ -26278,6 +26288,16 @@ interface <dfn>HTMLImageElement</dfn> : <span>HTMLElement</span> {
any rotation needed to correctly orient the image, regardless of the value of the
<span>'image-orientation'</span> property.</p>

<p>The IDL attribute <dfn
data-x="dom-img-intrinsicOrientationAngle"><code>intrinsicOrientationAngle</code></dfn> must
return the angle of the <span data-x="img-req-data">image data</span>'s <span>intrinsic
orientation</span>.</p>

<p>The IDL attribute <dfn
data-x="dom-img-intrinsicOrientationFlip"><code>intrinsicOrientationFlip</code></dfn> must
return true if the <span data-x="img-req-data">image data</span>'s <span>intrinsic
orientation</span> applies the optional horizontal flip, and false otherwise.</p>

<p>The IDL attribute <dfn data-x="dom-img-complete"><code>complete</code></dfn> must return true if
any of the following conditions is true:</p>

Expand Down Expand Up @@ -27265,7 +27285,8 @@ was an English &lt;a href="/wiki/Music_hall">music hall&lt;/a> singer, ...</code
The <span>pending request</span> is initially set to null.</p>

<p>An <dfn>image request</dfn> has a <dfn data-x="img-req-state">state</dfn>, <dfn
data-x="img-req-url">current URL</dfn>, and <dfn data-x="img-req-data">image data</dfn>.</p>
data-x="img-req-url">current URL</dfn>, <dfn data-x="img-req-data">image data</dfn>, and
<dfn data-x="img-req-orientation">orientation</dfn>.</p>

<p>An <span>image request</span>'s <span data-x="img-req-state">state</span> is one of the
following:</p>
Expand Down Expand Up @@ -27296,6 +27317,64 @@ was an English &lt;a href="/wiki/Music_hall">music hall&lt;/a> singer, ...</code
<p>An <span>image request</span>'s <span data-x="img-req-data">image data</span> is the decoded
image data.</p>

<p>An <span>image request</span>'s <span data-x="img-req-data">image data</span> has an associated
<dfn>intrinsic orientation</dfn>, which is the orthogonal transformation that was applied to the
raw data in the image during its decoding. The transformation consists of a rotation of 0, 90,
180, or 270 degrees, followed by an optional horizontal flip. If no transformation was applied,
the <span>intrinsic orientation</span> is considered to be 0 degrees with no horizontal flip.</p>

<div class="note">

<p>This transformation is the one that is automatically applied when the
<span>'image-orientation'</span> property is set to 'from-image'.</p>

<p>For JPEG images, the <span>intrinsic orientation</span> is the orientation specified by the
EXIF metadata Orientation tag. Orientation tag values correspond to <span>intrinsic
orientation</span> values as follows:</p>

<table>
<thead>
<tr>
<th>Tag value
<th>Angle
<th>Horizontal flip
<tbody>
<tr>
<td>1
<td>0&deg;
<td>no
<tr>
<td>2
<td>0&deg;
<td>yes
<tr>
<td>3
<td>180&deg;
<td>no
<tr>
<td>4
<td>180&deg;
<td>yes
<tr>
<td>5
<td>90&deg;
<td>yes
<tr>
<td>6
<td>90&deg;
<td>no
<tr>
<td>7
<td>270&deg;
<td>yes
<tr>
<td>8
<td>270&deg;
<td>no
</table>

</div>

<p>When an <span>image request</span>'s <span data-x="img-req-state">state</span> is either <span
data-x="img-inc">partially available</span> or <span data-x="img-all">completely available</span>,
the <span>image request</span> is said to be <dfn data-x="img-available">available</dfn>.</p>
Expand Down