ImageBitmap Constructor taking URL - Revision history

Kenrussell at 18:31, 5 November 2014

2014-11-05T18:31:21Z

← Older revision		Revision as of 18:31, 5 November 2014
Line 17:		Line 17:
	=== Current Usage and Workarounds ===		=== Current Usage and Workarounds ===

	Most WebGL applications encode normal maps or other non-image data into images, and upload these images to textures using WebGL-specific options that skip the alpha premultiplication or color correction the user agent may perform. Some WebGL implementers have pointed out that the current ~~WebGL~~ mechanisms ~~are inefficient, and~~ usually result in a synchronous image re-decode. Switching to use ImageBitmap to provide control over these image decoding options will be more efficient, and allow the WebGL mechanisms to be removed in the next version of ~~the WebGL~~ specification.		Most WebGL applications encode normal maps or other non-image data into images, and upload these images to textures using WebGL-specific options that skip the alpha premultiplication or color correction the user agent may perform. Some WebGL implementers have pointed out that the current mechanisms usually result in a synchronous image re-decode. Switching to use ImageBitmap to provide control over these image decoding options will be more efficient, and allow the WebGL mechanisms to be removed in the next version of that specification.

	=== Benefits ===		=== Benefits ===

Kenrussell at 18:30, 5 November 2014

2014-11-05T18:30:30Z

← Older revision		Revision as of 18:30, 5 November 2014
Line 5:		Line 5:
	ImageBitmap provides a useful abstraction for image data that can be drawn to a 2D canvas context or uploaded to a texture in a WebGL canvas context. It attempts to move all of the image decoding and preparation work out of the critical path, so that by the time an ImageBitmap is constructed, the data it contains is in exactly the right format for rendering. [[ImageBitmap Options]] provides control over the image decoding process so that the resulting bitmap is in exactly the desired form. For example, it can be used to disable the user agent's premultiplication of the alpha channel into the color channels.		ImageBitmap provides a useful abstraction for image data that can be drawn to a 2D canvas context or uploaded to a texture in a WebGL canvas context. It attempts to move all of the image decoding and preparation work out of the critical path, so that by the time an ImageBitmap is constructed, the data it contains is in exactly the right format for rendering. [[ImageBitmap Options]] provides control over the image decoding process so that the resulting bitmap is in exactly the desired form. For example, it can be used to disable the user agent's premultiplication of the alpha channel into the color channels.

	Currently an ImageBitmap can only be constructed from a fully-loaded media resource such as an HTMLImageElement. Unfortunately, ~~some~~ user agents ~~discard~~ the ~~compressed~~ image data ~~from HTMLImageElements~~ before ~~firing the~~ onload handler~~. (An ImageBitmap can~~ only ~~be constructed from~~ an ~~HTMLImageElement~~ after the ~~image element~~'s onload handler ~~has fired.) These user agents perform all image decompression before firing the onload handler~~. ~~The only way that~~ the ImageBitmap options ~~can~~ be ~~taken into account~~ is ~~during the decoding process~~. ~~Transformations done during decoding~~, ~~like premultiplying~~ the ~~alpha channel into~~ the ~~color channels, are not reversible~~.		Currently an ImageBitmap can only be constructed from a fully-loaded media resource such as an HTMLImageElement. Unfortunately, most user agents decode the image data before calling HTMLImageElement's onload handler, and it is only legal to construct an ImageBitmap after the HTMLImageElement's onload handler is called. If the ImageBitmap options would specify different decoding parameters than the browser's default, the image must be decoded twice, which is inefficient. Further, some user agents discard the compressed image data from HTMLImageElements before firing the onload handler.

	This proposal adds URL to the [[https://html.spec.whatwg.org/multipage/webappapis.html#imagebitmapsource ImageBitmapSource union type]], which is the first argument to [[https://html.spec.whatwg.org/multipage/webappapis.html#dom-createimagebitmap createImageBitmap]]. The image is downloaded from that URL, decoded, and processed as part of the construction of the ImageBitmap, taking into account the ImageBitmap options. If any errors occur during the downloading or decoding process, including if the image is not single-origin after honoring the crossOrigin attribute of the ImageBitmap options, the Promise returned from createImageBitmap is rejected. If image downloading and decoding succeeds, then the promise is resolved with the new ImageBitmap as its value.		This proposal adds URL to the [[https://html.spec.whatwg.org/multipage/webappapis.html#imagebitmapsource ImageBitmapSource union type]], which is the first argument to [[https://html.spec.whatwg.org/multipage/webappapis.html#dom-createimagebitmap createImageBitmap]]. The image is downloaded from that URL, decoded, and processed as part of the construction of the ImageBitmap, taking into account the ImageBitmap options. If any errors occur during the downloading or decoding process, including if the image is not single-origin after honoring the crossOrigin attribute of the ImageBitmap options, the Promise returned from createImageBitmap is rejected. If image downloading and decoding succeeds, then the promise is resolved with the new ImageBitmap as its value.

Kenrussell at 18:26, 5 November 2014

2014-11-05T18:26:58Z

← Older revision		Revision as of 18:26, 5 November 2014
Line 5:		Line 5:
	ImageBitmap provides a useful abstraction for image data that can be drawn to a 2D canvas context or uploaded to a texture in a WebGL canvas context. It attempts to move all of the image decoding and preparation work out of the critical path, so that by the time an ImageBitmap is constructed, the data it contains is in exactly the right format for rendering. [[ImageBitmap Options]] provides control over the image decoding process so that the resulting bitmap is in exactly the desired form. For example, it can be used to disable the user agent's premultiplication of the alpha channel into the color channels.		ImageBitmap provides a useful abstraction for image data that can be drawn to a 2D canvas context or uploaded to a texture in a WebGL canvas context. It attempts to move all of the image decoding and preparation work out of the critical path, so that by the time an ImageBitmap is constructed, the data it contains is in exactly the right format for rendering. [[ImageBitmap Options]] provides control over the image decoding process so that the resulting bitmap is in exactly the desired form. For example, it can be used to disable the user agent's premultiplication of the alpha channel into the color channels.

	Currently an ImageBitmap can only be constructed from a fully-loaded media resource such as an HTMLImageElement. Unfortunately, some user agents discard the compressed image data from HTMLImageElements before firing the onload handler. (An ImageBitmap can only be constructed from an HTMLImageElement after the image element's onload handler has fired.) These user agents perform all ~~of the~~ image decompression before firing the onload handler. The only way that the ImageBitmap options can be taken into account is during the decoding process. Transformations done during decoding, like premultiplying the alpha channel into the color channels, are not reversible.		Currently an ImageBitmap can only be constructed from a fully-loaded media resource such as an HTMLImageElement. Unfortunately, some user agents discard the compressed image data from HTMLImageElements before firing the onload handler. (An ImageBitmap can only be constructed from an HTMLImageElement after the image element's onload handler has fired.) These user agents perform all image decompression before firing the onload handler. The only way that the ImageBitmap options can be taken into account is during the decoding process. Transformations done during decoding, like premultiplying the alpha channel into the color channels, are not reversible.

	This proposal adds URL to the ImageBitmapSource union type, which is the first argument to createImageBitmap. The image is downloaded from that URL, decoded, and processed as part of the construction of the ImageBitmap, taking into account the ImageBitmap options. If any errors occur during the downloading or decoding process, including if the image is not single-origin after honoring the crossOrigin attribute of the ImageBitmap options, the Promise returned from createImageBitmap is rejected. If image downloading and decoding succeeds, then the promise is resolved with the new ImageBitmap as its value.		This proposal adds URL to the [[https://html.spec.whatwg.org/multipage/webappapis.html#imagebitmapsource ImageBitmapSource union type]], which is the first argument to [[https://html.spec.whatwg.org/multipage/webappapis.html#dom-createimagebitmap createImageBitmap]]. The image is downloaded from that URL, decoded, and processed as part of the construction of the ImageBitmap, taking into account the ImageBitmap options. If any errors occur during the downloading or decoding process, including if the image is not single-origin after honoring the crossOrigin attribute of the ImageBitmap options, the Promise returned from createImageBitmap is rejected. If image downloading and decoding succeeds, then the promise is resolved with the new ImageBitmap as its value.

	=== Current Limitations ===		=== Current Limitations ===

Kenrussell: /* Requests for this Feature */

2014-11-05T18:23:43Z

Requests for this Feature

← Older revision		Revision as of 18:23, 5 November 2014
Line 28:		Line 28:
	* Microsoft has requested this feature in order to provide an efficient path for uploading WebGL images to textures.		* Microsoft has requested this feature in order to provide an efficient path for uploading WebGL images to textures.
	* Other WebGL implementers (Apple, Google, Mozilla) support adding this feature and will implement it.		* Other WebGL implementers (Apple, Google, Mozilla) support adding this feature and will implement it.
			* The WebGL 2.0 specification under development will remove the WebGL-specific image decoding options and rely on this mechanism instead.

	== Proposed Solutions ==		== Proposed Solutions ==

Kenrussell at 18:11, 5 November 2014

2014-11-05T18:11:03Z

← Older revision		Revision as of 18:11, 5 November 2014
Line 7:		Line 7:
	Currently an ImageBitmap can only be constructed from a fully-loaded media resource such as an HTMLImageElement. Unfortunately, some user agents discard the compressed image data from HTMLImageElements before firing the onload handler. (An ImageBitmap can only be constructed from an HTMLImageElement after the image element's onload handler has fired.) These user agents perform all of the image decompression before firing the onload handler. The only way that the ImageBitmap options can be taken into account is during the decoding process. Transformations done during decoding, like premultiplying the alpha channel into the color channels, are not reversible.		Currently an ImageBitmap can only be constructed from a fully-loaded media resource such as an HTMLImageElement. Unfortunately, some user agents discard the compressed image data from HTMLImageElements before firing the onload handler. (An ImageBitmap can only be constructed from an HTMLImageElement after the image element's onload handler has fired.) These user agents perform all of the image decompression before firing the onload handler. The only way that the ImageBitmap options can be taken into account is during the decoding process. Transformations done during decoding, like premultiplying the alpha channel into the color channels, are not reversible.

	This proposal adds URL to the ImageBitmapSource union type: the first argument to createImageBitmap. The image is downloaded from that URL, decoded, and processed as part of the construction of the ImageBitmap, taking into account the ImageBitmap options. If any errors occur during the downloading or decoding process, including if the image is not single-origin after honoring the crossOrigin attribute of the ImageBitmap options, the Promise returned from createImageBitmap is rejected. If image downloading and decoding succeeds, then the promise is resolved with the new ImageBitmap as its value.		This proposal adds URL to the ImageBitmapSource union type, which is the first argument to createImageBitmap. The image is downloaded from that URL, decoded, and processed as part of the construction of the ImageBitmap, taking into account the ImageBitmap options. If any errors occur during the downloading or decoding process, including if the image is not single-origin after honoring the crossOrigin attribute of the ImageBitmap options, the Promise returned from createImageBitmap is rejected. If image downloading and decoding succeeds, then the promise is resolved with the new ImageBitmap as its value.

	=== Current Limitations ===		=== Current Limitations ===

Kenrussell at 18:10, 5 November 2014

2014-11-05T18:10:50Z

← Older revision		Revision as of 18:10, 5 November 2014
Line 3:		Line 3:
	== Use Case Description ==		== Use Case Description ==

	ImageBitmap provides a useful abstraction for image data that can be drawn to a 2D canvas context or uploaded to a texture in a WebGL canvas context. It attempts to move all of the image decoding and preparation work out of the critical path, so that by the time an ImageBitmap is constructed, the data it contains is in exactly the right format for rendering. [[ImageBitmap Options]] provides control over the image decoding process so that the resulting bitmap is in exactly the desired form. For example, it can be used to disable the premultiplication of the alpha channel into the color channels ~~which most user agents perform upon image decoding (all known ones, at the time of this writing)~~.		ImageBitmap provides a useful abstraction for image data that can be drawn to a 2D canvas context or uploaded to a texture in a WebGL canvas context. It attempts to move all of the image decoding and preparation work out of the critical path, so that by the time an ImageBitmap is constructed, the data it contains is in exactly the right format for rendering. [[ImageBitmap Options]] provides control over the image decoding process so that the resulting bitmap is in exactly the desired form. For example, it can be used to disable the user agent's premultiplication of the alpha channel into the color channels.

	Currently an ImageBitmap can only be constructed from a fully-loaded media resource such as an HTMLImageElement. Unfortunately, some user agents discard the compressed image data from HTMLImageElements before firing the onload handler. (An ImageBitmap can only be constructed from an HTMLImageElement after the image element's onload handler has fired.) These user agents perform all of the image decompression before firing the onload handler. The only way that the ImageBitmap options can be taken into account is during the decoding process. Transformations like premultiplying the alpha channel into the color channels are not reversible.		Currently an ImageBitmap can only be constructed from a fully-loaded media resource such as an HTMLImageElement. Unfortunately, some user agents discard the compressed image data from HTMLImageElements before firing the onload handler. (An ImageBitmap can only be constructed from an HTMLImageElement after the image element's onload handler has fired.) These user agents perform all of the image decompression before firing the onload handler. The only way that the ImageBitmap options can be taken into account is during the decoding process. Transformations done during decoding, like premultiplying the alpha channel into the color channels, are not reversible.

	This proposal adds URL to the ImageBitmapSource union type: the first argument to createImageBitmap. The image is downloaded from that URL, decoded, and processed as part of the construction of the ImageBitmap, taking into account the ImageBitmap options. If any errors occur during the downloading or decoding process, including if the image is not single-origin after honoring the crossOrigin attribute of the ImageBitmap options, the Promise returned from createImageBitmap is rejected. If image downloading and decoding succeeds, then the promise is resolved with the new ImageBitmap as its value.		This proposal adds URL to the ImageBitmapSource union type: the first argument to createImageBitmap. The image is downloaded from that URL, decoded, and processed as part of the construction of the ImageBitmap, taking into account the ImageBitmap options. If any errors occur during the downloading or decoding process, including if the image is not single-origin after honoring the crossOrigin attribute of the ImageBitmap options, the Promise returned from createImageBitmap is rejected. If image downloading and decoding succeeds, then the promise is resolved with the new ImageBitmap as its value.

Kenrussell: Added proposal for constructing ImageBitmaps from URLs.

2014-11-05T18:03:25Z

Added proposal for constructing ImageBitmaps from URLs.

New page

:''Allows creating an ImageBitmap from the URL of an image.''

== Use Case Description ==

ImageBitmap provides a useful abstraction for image data that can be drawn to a 2D canvas context or uploaded to a texture in a WebGL canvas context. It attempts to move all of the image decoding and preparation work out of the critical path, so that by the time an ImageBitmap is constructed, the data it contains is in exactly the right format for rendering. [[ImageBitmap Options]] provides control over the image decoding process so that the resulting bitmap is in exactly the desired form. For example, it can be used to disable the premultiplication of the alpha channel into the color channels which most user agents perform upon image decoding (all known ones, at the time of this writing).

Currently an ImageBitmap can only be constructed from a fully-loaded media resource such as an HTMLImageElement. Unfortunately, some user agents discard the compressed image data from HTMLImageElements before firing the onload handler. (An ImageBitmap can only be constructed from an HTMLImageElement after the image element's onload handler has fired.) These user agents perform all of the image decompression before firing the onload handler. The only way that the ImageBitmap options can be taken into account is during the decoding process. Transformations like premultiplying the alpha channel into the color channels are not reversible.

This proposal adds URL to the ImageBitmapSource union type: the first argument to createImageBitmap. The image is downloaded from that URL, decoded, and processed as part of the construction of the ImageBitmap, taking into account the ImageBitmap options. If any errors occur during the downloading or decoding process, including if the image is not single-origin after honoring the crossOrigin attribute of the ImageBitmap options, the Promise returned from createImageBitmap is rejected. If image downloading and decoding succeeds, then the promise is resolved with the new ImageBitmap as its value.

=== Current Limitations ===

The intent of ImageBitmap is to prepare the image data in the desired form for drawing or texture uploading before resolving the promise returned from createImageBitmap. Unfortunately, most user agents decode the image before calling the onload handler, and it's only legal to pass an HTMLImageElement to createImageBitmap once the image's onload handler has been called. This means that at a minimum, in order to respect the [[ImageBitmap Options]] argument to createImageBitmap, two decodes of the image must be done, which is inefficient.

Further, some user agents discard the compressed image data for an HTMLImageElement after decoding it, and before calling the onload handler. Honoring [[ImageBitmap Options]] in these user agents is not possible without rearchitecting their image decoding subsystem.

=== Current Usage and Workarounds ===

Most WebGL applications encode normal maps or other non-image data into images, and upload these images to textures using WebGL-specific options that skip the alpha premultiplication or color correction the user agent may perform. Some WebGL implementers have pointed out that the current WebGL mechanisms are inefficient, and usually result in a synchronous image re-decode. Switching to use ImageBitmap to provide control over these image decoding options will be more efficient, and allow the WebGL mechanisms to be removed in the next version of the WebGL specification.

=== Benefits ===

Provides the most efficient image decoding path for canvas applications requiring control over image decoding.

=== Requests for this Feature ===

* Microsoft has requested this feature in order to provide an efficient path for uploading WebGL images to textures.
* Other WebGL implementers (Apple, Google, Mozilla) support adding this feature and will implement it.

== Proposed Solutions ==

==== Processing Model ====

Compared to constructing an ImageBitmap from an HTMLImageElement, this alternative construction path downloads and decodes the image data as part of resolving the promise returned by createImageBitmap.

==== Limitations ====

Only supports single images. There's no provision for downloading other types of media from URLs.

==== Implementation ====

Browser vendors would trigger their usual image downloading and decoding code paths upon creating an ImageBitmap from a URL. Browsers would implement this new API in order to provide more efficient image handling for 2D and WebGL canvas applications.

==== Adoption ====

WebGL application authors in particular would readily update their code in order to use this new API because it will provide more efficient uploading of images into textures. It's straightforward to add conditional code which prefers this new, more efficient, mechanism, and which uses the older texture upload paths if it's not available.

[[Category:Proposals]]