Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 806874f

Browse files
annevkannevk
committed
Support SVGImageElement in <canvas>
This adds SVGImageElement support to <canvas>'s 2d context's createPattern(), drawImage(), as well as window.createImageBitmap().
1 parent 6762f87 commit 806874f

File tree

1 file changed

+46
-32
lines changed

1 file changed

+46
-32
lines changed

‎source

+46-32
Original file line numberDiff line numberDiff line change
@@ -3917,10 +3917,12 @@ a.setAttribute('href', 'http://example.com/'); // change the content attribute d
39173917
<p>The following features are defined in the SVG specifications:</p>
39183918

39193919
<ul class="brief">
3920-
<li><dfn data-noexport="" data-x-href="https://www.w3.org/TR/SVG11/struct.html#InterfaceSVGSVGElement"><code>SVGSVGElement</code></dfn> interface
3920+
<li><dfn data-noexport="" data-x-href="https://www.w3.org/TR/SVG11/struct.html#InterfaceSVGImageElement"><code>SVGImageElement</code></dfn> interface
39213921
<li><dfn data-noexport="" data-x-href="https://www.w3.org/TR/SVG11/script.html#InterfaceSVGScriptElement"><code>SVGScriptElement</code></dfn> interface
3922+
<li><dfn data-noexport="" data-x-href="https://www.w3.org/TR/SVG11/struct.html#InterfaceSVGSVGElement"><code>SVGSVGElement</code></dfn> interface
39223923
<li><dfn data-noexport="" data-x-href="https://www.w3.org/TR/SVG11/struct.html#DescElement">SVG <code>desc</code></dfn> element
39233924
<li><dfn data-noexport="" data-x-href="https://www.w3.org/TR/SVG11/extend.html#ForeignObjectElement">SVG <code>foreignObject</code></dfn> element
3925+
<li><dfn data-noexport="" data-x-href="https://www.w3.org/TR/SVG11/struct.html#ImageElement">SVG <code>image</code></dfn> element
39243926
<li><dfn data-noexport="" data-x-href="https://www.w3.org/TR/SVG11/script.html#ScriptElement">SVG <code>script</code></dfn> element
39253927
<li><dfn data-noexport="" data-x-href="https://www.w3.org/TR/SVG11/struct.html#SVGElement">SVG <code>svg</code></dfn> element
39263928
<li><dfn data-noexport="" data-x-href="https://www.w3.org/TR/SVG11/struct.html#TitleElement">SVG <code>title</code></dfn> element
@@ -9015,8 +9017,8 @@ partial /*sealed*/ interface <dfn>Document</dfn> {
90159017
most recently started executing amongst those that have not yet finished executing.</p>
90169018

90179019
<p>Returns null if the <code>Document</code> is not currently executing a <code>script</code>
9018-
element or <span>SVG <code>script</code></span> element (e.g., because the running script is an
9019-
event handler, or a timeout).</p>
9020+
or <span>SVG <code>script</code></span> element (e.g., because the running script is an event
9021+
handler, or a timeout).</p>
90209022

90219023
</dd>
90229024

@@ -49778,7 +49780,7 @@ interface <dfn>HTMLOptionElement</dfn> : <span>HTMLElement</span> {
4977849780
whitespace</span> from the concatenation of <span data-x="concept-cd-data">data</span> of all the
4977949781
<code>Text</code> node descendants of the <code>option</code> element, in <span>tree order</span>,
4978049782
excluding any that are descendants of descendants of the <code>option</code> element that are
49781-
themselves <code>script</code> elements or <span>SVG <code>script</code></span> elements.</p>
49783+
themselves <code>script</code> or <span>SVG <code>script</code></span> elements.</p>
4978249784

4978349785
<p>On setting, the <code data-x="dom-option-text">text</code> attribute must act as if the
4978449786
<code>textContent</code> IDL attribute on the element had been set to the new value.</p>
@@ -60055,6 +60057,9 @@ callback <dfn>BlobCallback</dfn> = void (<span>Blob</span>? blob);</pre>
6005560057
<!-- v2: we're on v5. suggestions for subsequent versions are marked v6, v7, v8. -->
6005660058

6005760059
<pre class="idl">typedef (<span>HTMLImageElement</span> or
60060+
<span>SVGImageElement</span>) <dfn>HTMLOrSVGImageElement</dfn>;
60061+
60062+
typedef (<span>HTMLOrSVGImageElement</span> or
6005860063
<span>HTMLVideoElement</span> or
6005960064
<span>HTMLCanvasElement</span> or
6006060065
<span>CanvasRenderingContext2D</span> or
@@ -62632,7 +62637,8 @@ try {
6263262637

6263362638
<ul>
6263462639

62635-
<li><code>HTMLImageElement</code> (<code>img</code> elements)</li>
62640+
<li><code>HTMLOrSVGImageElement</code> (<code>img</code> or <span>SVG <code>image</code></span>
62641+
elements)</li>
6263662642

6263762643
<li><code>HTMLVideoElement</code> (<code>video</code> elements)</li>
6263862644

@@ -62644,6 +62650,11 @@ try {
6264462650

6264562651
</ul>
6264662652

62653+
<p class="note">Although not formally specified as such, <span>SVG <code>image</code></span>
62654+
elements are expected to be implemented nearly identical to <code>img</code> elements. That is,
62655+
<span>SVG <code>image</code></span> elements share the fundamental concepts and features of
62656+
<code>img</code> elements.</p>
62657+
6264762658
<p class="note">The <code>ImageBitmap</code> interface can be created from a number of other
6264862659
image-representing types, including <code>ImageData</code>.</p>
6264962660

@@ -62654,19 +62665,19 @@ try {
6265462665

6265562666
<ol>
6265662667

62657-
<li><p>If the <var>image</var> argument is an <code>HTMLImageElement</code> object that
62668+
<li><p>If the <var>image</var> argument is an <code>HTMLOrSVGImageElement</code> object that
6265862669
is in the <span data-x="img-error">broken</span> state, then throw an
6265962670
<code>InvalidStateError</code> exception, return <i>aborted</i>, and abort these steps.</p>
6266062671

62661-
<li><p>If the <var>image</var> argument is an <code>HTMLImageElement</code> object that
62672+
<li><p>If the <var>image</var> argument is an <code>HTMLOrSVGImageElement</code> object that
6266262673
is not <span data-x="img-good">fully decodable</span>, or if the <var>image</var>
6266362674
argument is an <code>HTMLVideoElement</code> object whose <code
6266462675
data-x="dom-media-readyState">readyState</code> attribute is either <code
6266562676
data-x="dom-media-HAVE_NOTHING">HAVE_NOTHING</code> or <code
6266662677
data-x="dom-media-HAVE_METADATA">HAVE_METADATA</code>, then return <i>bad</i> and abort these
6266762678
steps.</p></li>
6266862679

62669-
<li><p>If the <var>image</var> argument is an <code>HTMLImageElement</code> object with
62680+
<li><p>If the <var>image</var> argument is an <code>HTMLOrSVGImageElement</code> object with
6267062681
an <span>intrinsic width</span> or <span>intrinsic height</span> (or both) equal to zero, then
6267162682
return <i>bad</i> and abort these steps.</p>
6267262683
<!-- http://software.hixie.ch/utilities/js/live-dom-viewer/saved/2567 -->
@@ -62679,13 +62690,13 @@ try {
6267962690

6268062691
</ol>
6268162692

62682-
<p>When a <code>CanvasImageSource</code> object represents an <code>HTMLImageElement</code>, the
62683-
element's image must be used as the source image.</p>
62693+
<p>When a <code>CanvasImageSource</code> object represents an <code>HTMLOrSVGImageElement</code>,
62694+
the element's image must be used as the source image.</p>
6268462695

6268562696
<p>Specifically, when a <code>CanvasImageSource</code> object represents an animated image in an
62686-
<code>HTMLImageElement</code>, the user agent must use the default image of the animation (the
62687-
one that the format defines is to be used when animation is not supported or is disabled), or, if
62688-
there is no such image, the first frame of the animation, when rendering the image for
62697+
<code>HTMLOrSVGImageElement</code>, the user agent must use the default image of the animation
62698+
(the one that the format defines is to be used when animation is not supported or is disabled),
62699+
or, if there is no such image, the first frame of the animation, when rendering the image for
6268962700
<code>CanvasRenderingContext2D</code> APIs.</p>
6269062701

6269162702
<p>When a <code>CanvasImageSource</code> object represents an <code>HTMLVideoElement</code>, then
@@ -62715,10 +62726,10 @@ try {
6271562726

6271662727
<!--ADD-TOPIC:Security-->
6271762728
<p><dfn>The <var>image argument</var> is not origin-clean</dfn> if it is an
62718-
<code>HTMLImageElement</code> or <code>HTMLVideoElement</code> whose <span>origin</span> is not
62719-
the <span data-x="same origin">same</span> as the <span>origin</span> specified by the <span>entry
62720-
settings object</span>, or if it is an <code>HTMLCanvasElement</code> whose bitmap's <span
62721-
data-x="concept-canvas-origin-clean">origin-clean</span> flag is false, or if it is a
62729+
<code>HTMLOrSVGImageElement</code> or <code>HTMLVideoElement</code> whose <span>origin</span> is
62730+
not the <span data-x="same origin">same</span> as the <span>origin</span> specified by the
62731+
<span>entry settings object</span>, or if it is an <code>HTMLCanvasElement</code> whose bitmap's
62732+
<span data-x="concept-canvas-origin-clean">origin-clean</span> flag is false, or if it is a
6272262733
<code>CanvasRenderingContext2D</code> object whose <span
6272362734
data-x="concept-canvas-origin-clean">origin-clean</span> flag is false.</p>
6272462735
<!--REMOVE-TOPIC:Security-->
@@ -64423,7 +64434,8 @@ v6DVT (also check for '- -' bits in the part above) -->
6442364434
<ul class="brief">
6442464435

6442564436
<li><p>an <code>a</code> element that <span>represents</span> a
64426-
<span>hyperlink</span> and that does not have any <code>img</code> descendants</p></li>
64437+
<span>hyperlink</span> and that does not have any <code>img</code> or <span>SVG
64438+
<code>image</code></span> element descendants</p></li>
6442764439

6442864440
<li><p>a <code>button</code> element</p></li>
6442964441

@@ -65826,8 +65838,9 @@ function AddCloud(data, x, y) { ... }</pre>
6582665838
<p>The <code>canvas</code> APIs must perform colour correction at only two points: when rendering
6582765839
images with their own gamma correction and colour space information onto a bitmap, to convert the
6582865840
image to the colour space used by the bitmaps (e.g. using the 2D Context's <code
65829-
data-x="dom-context-2d-drawImage">drawImage()</code> method with an <code>HTMLImageElement</code>
65830-
object), and when rendering the actual canvas bitmap to the output device.</p>
65841+
data-x="dom-context-2d-drawImage">drawImage()</code> method with an
65842+
<code>HTMLOrSVGImageElement</code> object), and when rendering the actual canvas bitmap to the
65843+
output device.</p>
6583165844

6583265845
<p class="note">Thus, in the 2D context, colours used to draw shapes onto the canvas will exactly
6583365846
match colours obtained through the <code
@@ -90221,7 +90234,7 @@ interface <dfn>ImageBitmap</dfn> {
9022190234
readonly attribute unsigned long <span data-x="dom-ImageBitmap-height">height</span>;
9022290235
};
9022390236

90224-
typedef (<span>HTMLImageElement</span> or
90237+
typedef (<span>HTMLOrSVGImageElement</span> or
9022590238
<span>HTMLVideoElement</span> or
9022690239
<span>HTMLCanvasElement</span> or
9022790240
<span>Blob</span> or
@@ -90377,6 +90390,7 @@ interface <dfn>ImageBitmapFactories</dfn> {
9037790390
<dl>
9037890391

9037990392
<dt>If <var>image</var> is an <code>img</code> element
90393+
<dt>If <var>image</var> is an <span>SVG <code>image</code></span> element
9038090394

9038190395
<dd>
9038290396

@@ -90385,29 +90399,29 @@ interface <dfn>ImageBitmapFactories</dfn> {
9038590399
<li><p>If either the <var>sw</var> or <var>sh</var> arguments are specified
9038690400
but zero, return a promise rejected with an <code>IndexSizeError</code> exception and abort these steps.</p></li>
9038790401

90388-
<li><p>If the <code>img</code> element is not <span data-x="img-all">completely
90389-
available</span>, then return a promise rejected with an <code>InvalidStateError</code> exception and abort these
90402+
<li><p>If <var>image</var> is not <span data-x="img-all">completely available</span>, then
90403+
return a promise rejected with an <code>InvalidStateError</code> exception and abort these
9039090404
steps.</p></li>
9039190405

90392-
<li><p>If the <code>img</code> element's media data is not a bitmap (e.g. it's a vector
90393-
graphic), then return a promise rejected with an <code>InvalidStateError</code> exception and abort these
90406+
<li><p>If <var>image</var>'s media data is not a bitmap (e.g. it's a vector graphic), then
90407+
return a promise rejected with an <code>InvalidStateError</code> exception and abort these
9039490408
steps.</p></li>
9039590409

9039690410
<li><p>Create a new <code>ImageBitmap</code> object.</p></li>
9039790411

9039890412
<li><p>Let the <code>ImageBitmap</code> object's <span
90399-
data-x="concept-ImageBitmap-bitmap-data">bitmap data</span> be a copy of the <code>img</code>
90400-
element's media data, <span>cropped to the source rectangle with formatting</span>. If this is
90401-
an animated image, the <code>ImageBitmap</code> object's <span
90413+
data-x="concept-ImageBitmap-bitmap-data">bitmap data</span> be a copy of <var>image</var>'s
90414+
media data, <span>cropped to the source rectangle with formatting</span>. If this is an
90415+
animated image, the <code>ImageBitmap</code> object's <span
9040290416
data-x="concept-ImageBitmap-bitmap-data">bitmap data</span> must only be taken from the
9040390417
default image of the animation (the one that the format defines is to be used when animation
9040490418
is not supported or is disabled), or, if there is no such image, the first frame of the
9040590419
animation.</p></li>
9040690420

90407-
<li><p>If the <span>origin</span> of the <code>img</code> element's image is not the
90408-
<span>same origin</span> as the <span>origin</span> specified by the <span>entry settings
90409-
object</span>, then set the <span data-x="concept-canvas-origin-clean">origin-clean
90410-
</span> flag of the <code>ImageBitmap</code> object's bitmap to false.</p></li>
90421+
<li><p>If the <span>origin</span> of <var>image</var>'s image is not the <span>same
90422+
origin</span> as the <span>origin</span> specified by the <span>entry settings object</span>,
90423+
then set the <span data-x="concept-canvas-origin-clean">origin-clean</span> flag of the
90424+
<code>ImageBitmap</code> object's bitmap to false.</p></li>
9041190425

9041290426
<li><p>Return a new promise, but continue running these steps
9041390427
<span>in parallel</span>.</p></li>

0 commit comments

Comments
 (0)