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

Fix globals, part 15: createImageBitmap() #35952

Merged
merged 10 commits into from
Sep 29, 2024
Merged
Show file tree
Hide file tree
Changes from 7 commits
Commits
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
5 changes: 3 additions & 2 deletions files/en-us/_redirects.txt
Original file line number Diff line number Diff line change
Expand Up @@ -8784,7 +8784,7 @@
/en-US/docs/Web/API/IdleDetector/onchange /en-US/docs/Web/API/IdleDetector/change_event
/en-US/docs/Web/API/IdleDetector/requestPermission /en-US/docs/Web/API/IdleDetector/requestPermission_static
/en-US/docs/Web/API/Image /en-US/docs/Web/API/HTMLImageElement/Image
/en-US/docs/Web/API/ImageBitmapFactories/createImageBitmap /en-US/docs/Web/API/createImageBitmap
/en-US/docs/Web/API/ImageBitmapFactories/createImageBitmap /en-US/docs/Web/API/Window/createImageBitmap
/en-US/docs/Web/API/ImageBitmapRenderingContext/transferImageBitmap /en-US/docs/Web/API/ImageBitmapRenderingContext/transferFromImageBitmap
/en-US/docs/Web/API/ImageData.ImageData /en-US/docs/Web/API/ImageData/ImageData
/en-US/docs/Web/API/ImageData.data /en-US/docs/Web/API/ImageData/data
Expand Down Expand Up @@ -10256,7 +10256,7 @@
/en-US/docs/Web/API/WindowOrWorkerGlobalScope/caches /en-US/docs/Web/API/Window/caches
/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval /en-US/docs/Web/API/clearInterval
/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout /en-US/docs/Web/API/clearTimeout
/en-US/docs/Web/API/WindowOrWorkerGlobalScope/createImageBitmap /en-US/docs/Web/API/createImageBitmap
/en-US/docs/Web/API/WindowOrWorkerGlobalScope/createImageBitmap /en-US/docs/Web/API/Window/createImageBitmap
/en-US/docs/Web/API/WindowOrWorkerGlobalScope/crossOriginIsolated /en-US/docs/Web/API/Window/crossOriginIsolated
/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch /en-US/docs/Web/API/Window/fetch
/en-US/docs/Web/API/WindowOrWorkerGlobalScope/indexedDB /en-US/docs/Web/API/Window/indexedDB
Expand Down Expand Up @@ -10439,6 +10439,7 @@
/en-US/docs/Web/API/console/timeStamp /en-US/docs/Web/API/console/timeStamp_static
/en-US/docs/Web/API/console/trace /en-US/docs/Web/API/console/trace_static
/en-US/docs/Web/API/console/warn /en-US/docs/Web/API/console/warn_static
/en-US/docs/Web/API/createImageBitmap /en-US/docs/Web/API/Window/createImageBitmap
/en-US/docs/Web/API/crossOriginIsolated /en-US/docs/Web/API/Window/crossOriginIsolated
/en-US/docs/Web/API/crypto_property /en-US/docs/Web/API/Window/crypto
/en-US/docs/Web/API/document.URL /en-US/docs/Web/API/Document/URL
Expand Down
44 changes: 22 additions & 22 deletions files/en-us/_wikihistory.json
Original file line number Diff line number Diff line change
Expand Up @@ -66604,6 +66604,28 @@
"modified": "2020-10-15T22:16:13.286Z",
"contributors": ["mfuji09", "wbamberg"]
},
"Web/API/Window/createImageBitmap": {
"modified": "2020-10-15T21:37:56.407Z",
"contributors": [
"gmanpersona",
"mfluehr",
"styfle",
"fscholz",
"DomenicDenicola",
"Halfman",
"jaffathecake",
"jpmedley",
"Brettz9",
"MatthiasSaihttam",
"nmve",
"chrisdavidmills",
"yisibl",
"DrRataplan",
"zeird",
"Kaku",
"adria"
]
},
"Web/API/Window/crossOriginIsolated": {
"modified": "2020-10-15T22:25:16.295Z",
"contributors": ["ExE-Boss", "chrisdavidmills"]
Expand Down Expand Up @@ -71506,28 +71528,6 @@
"myakura"
]
},
"Web/API/createImageBitmap": {
"modified": "2020-10-15T21:37:56.407Z",
"contributors": [
"gmanpersona",
"mfluehr",
"styfle",
"fscholz",
"DomenicDenicola",
"Halfman",
"jaffathecake",
"jpmedley",
"Brettz9",
"MatthiasSaihttam",
"nmve",
"chrisdavidmills",
"yisibl",
"DrRataplan",
"zeird",
"Kaku",
"adria"
]
},
"Web/API/setInterval": {
"modified": "2020-12-09T23:19:41.310Z",
"contributors": [
Expand Down
2 changes: 1 addition & 1 deletion files/en-us/mozilla/firefox/releases/111/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ No notable changes.
See [Firefox bug 1785123](https://bugzil.la/1785123) for more details.
- The HTTP [`Authorization`](/en-US/docs/Web/HTTP/Headers/Authorization) header is removed from [`fetch()`](/en-US/docs/Web/API/Window/fetch) and [`XMLHttpRequest`](/en-US/docs/Web/API/XMLHttpRequest) requests that are redirected cross-origin (`fetch()` headers may be added by developers using the [`option.headers`](/en-US/docs/Web/API/Window/fetch#headers) argument).
See [Firefox bug 1802086](https://bugzil.la/1802086) for more details.
- The `none` value of the `options.imageOrientation` parameter passed to [`createImageBitmap()`](/en-US/docs/Web/API/createImageBitmap) has been renamed to [`from-image`](/en-US/docs/Web/API/createImageBitmap#from-image).
- The `none` value of the `options.imageOrientation` parameter passed to {{domxref("Window.createImageBitmap()")}} and {{domxref("WorkerGlobalScope.createImageBitmap()")}} has been renamed to `from-image`.
This is to better match the meaning of the equivalent CSS [`image-orientation`](/en-US/docs/Web/CSS/image-orientation) property. ([Firefox bug 1809740](https://bugzil.la/1809740)).

#### DOM
Expand Down
2 changes: 1 addition & 1 deletion files/en-us/mozilla/firefox/releases/42/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@ Our experimental implementation of the [Shadow DOM](/en-US/docs/Web/API/Web_comp

#### New APIs

- The {{domxref("ImageBitmap")}} interface and the {{domxref("createImageBitmap()")}} method have been implemented. They are available on regular window scripts and in Web workers and allow efficient posting of images between window and worker contexts ([Firefox bug 1044102](https://bugzil.la/1044102)).
- The {{domxref("ImageBitmap")}} interface, the {{domxref("Window.createImageBitmap()")}} and {{domxref("WorkerGlobalScope.createImageBitmap()")}} method have been implemented. They are available on regular window scripts and in Web workers and allow efficient posting of images between window and worker contexts ([Firefox bug 1044102](https://bugzil.la/1044102)).

#### Miscellaneous

Expand Down
2 changes: 1 addition & 1 deletion files/en-us/mozilla/firefox/releases/65/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ _No changes._
- {{domxref("Performance.toJSON()")}} has been exposed to {{domxref("Web_Workers_API", "Web Workers", "", "1")}} ([Firefox bug 1504958](https://bugzil.la/1504958)).
- {{domxref("XMLHttpRequest")}} requests will now throw a `NetworkError` if the requested content type is a `Blob`, and the request method is not `GET` ([Firefox bug 1502599](https://bugzil.la/1502599)).
- The `-moz-` prefixed versions of many of the {{domxref("Fullscreen API", "", "", "1")}} features have been deprecated, and will now display deprecation warnings in the JavaScript console when encountered ([Firefox bug 1504946](https://bugzil.la/1504946)).
- {{domxref("createImageBitmap()")}} now supports SVG images ({{domxref("SVGImageElement")}}) as an image source ([Firefox bug 1500768](https://bugzil.la/1500768)).
- {{domxref("Window.createImageBitmap()")}} and {{domxref("WorkerGlobalScope.createImageBitmap()")}} now supports SVG images ({{domxref("SVGImageElement")}}) as an image source ([Firefox bug 1500768](https://bugzil.la/1500768)).

#### DOM events

Expand Down
2 changes: 1 addition & 1 deletion files/en-us/mozilla/firefox/releases/93/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ This article provides information about the changes in Firefox 93 that will affe
### JavaScript

- [Class `static` initialization blocks](/en-US/docs/Web/JavaScript/Reference/Classes/Static_initialization_blocks) are now supported, allowing more flexible initialization of {{jsxref("Classes/static", "static")}} properties ([Firefox bug 1725689](https://bugzil.la/1725689)).
- The properties `imageOrientation` and `premultiplyAlpha` can be passed to the method {{domxref("createImageBitmap()")}} using the `options` object ([Firefox bug 1367251](https://bugzil.la/1367251)).
- The properties `imageOrientation` and `premultiplyAlpha` can be passed to the method {{domxref("Window.createImageBitmap()")}} and {{domxref("WorkerGlobalScope.createImageBitmap()")}} using the `options` object ([Firefox bug 1367251](https://bugzil.la/1367251)).
- {{jsxref("Intl.supportedValuesOf()")}} is now supported, allowing code to enumerate values supported by an implementation, This might be used, for example, to download a polyfill for just the missing category of values ([Firefox bug 1670033](https://bugzil.la/1670033)).

### HTTP
Expand Down
2 changes: 1 addition & 1 deletion files/en-us/mozilla/firefox/releases/98/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ No notable changes
#### DOM

- {{domxref("HTMLElement.outerText")}} is now supported ([Firefox bug 1709790](https://bugzil.la/1709790)).
- The properties `colorSpaceConversion`, `resizeWidth` and `resizeHeight` can be passed to the method {{domxref("createImageBitmap()")}} using the `options` object ([Firefox bug 1748868](https://bugzil.la/1748868) and [Firefox bug 1733559](https://bugzil.la/1733559)).
- The properties `colorSpaceConversion`, `resizeWidth` and `resizeHeight` can be passed to the method {{domxref("Window.createImageBitmap()")}} and {{domxref("WorkerGlobalScope.createImageBitmap()")}} using the `options` object ([Firefox bug 1748868](https://bugzil.la/1748868) and [Firefox bug 1733559](https://bugzil.la/1733559)).

#### Removals

Expand Down
2 changes: 1 addition & 1 deletion files/en-us/web/api/file/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ The **`File`** interface provides information about files and allows JavaScript

`File` objects are generally retrieved from a {{DOMxRef("FileList")}} object returned as a result of a user selecting files using the {{HTMLElement("input")}} element, or from a drag and drop operation's {{DOMxRef("DataTransfer")}} object.

A `File` object is a specific kind of {{DOMxRef("Blob")}}, and can be used in any context that a Blob can. In particular, {{DOMxRef("FileReader")}}, {{DOMxRef("URL.createObjectURL_static", "URL.createObjectURL()")}}, {{DOMxRef("createImageBitmap()")}}, the [`body`](/en-US/docs/Web/API/RequestInit#body) option to {{domxref("Window/fetch", "fetch()")}}, and {{DOMxRef("XMLHttpRequest.send()")}} accept both `Blob`s and `File`s.
A `File` object is a specific kind of {{DOMxRef("Blob")}}, and can be used in any context that a Blob can. In particular, {{DOMxRef("FileReader")}}, {{DOMxRef("URL.createObjectURL_static", "URL.createObjectURL()")}}, {{DOMxRef("Window.createImageBitmap", "createImageBitmap()")}}, the [`body`](/en-US/docs/Web/API/RequestInit#body) option to {{domxref("Window/fetch", "fetch()")}}, and {{DOMxRef("XMLHttpRequest.send()")}} accept both `Blob`s and `File`s.

See [Using files from web applications](/en-US/docs/Web/API/File_API/Using_files_from_web_applications) for more information and examples.

Expand Down
2 changes: 1 addition & 1 deletion files/en-us/web/api/gpudevice/createtexture/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,7 @@ The following criteria must be met when calling **`createTexture()`**, otherwise

In the WebGPU samples [Textured Cube sample](https://webgpu.github.io/webgpu-samples/samples/texturedCube/), a texture to use on the faces of a cube is created by:

- Loading the image into an {{domxref("HTMLImageElement")}} and creating an image bitmap using {{domxref("createImageBitmap()")}}.
- Loading the image into an {{domxref("HTMLImageElement")}} and creating an image bitmap using {{domxref("Window.createImageBitmap", "createImageBitmap()")}}.
- Creating a new texture using `createTexture()`.
- Copying the image bitmap into the texture using {{domxref("GPUQueue.copyExternalImageToTexture()")}}.

Expand Down
2 changes: 1 addition & 1 deletion files/en-us/web/api/gputexture/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ A `GPUTexture` object instance is created using the {{domxref("GPUDevice.createT

In the WebGPU samples [Textured Cube sample](https://webgpu.github.io/webgpu-samples/samples/texturedCube/), a texture to use on the faces of a cube is created by:

- Loading the image into an {{domxref("HTMLImageElement")}} and creating an image bitmap using {{domxref("createImageBitmap()")}}.
- Loading the image into an {{domxref("HTMLImageElement")}} and creating an image bitmap using {{domxref("Window.createImageBitmap", "createImageBitmap()")}}.
- Creating a new `GPUTexture` using `createTexture()`.
- Copying the image bitmap into the texture using {{domxref("GPUQueue.copyExternalImageToTexture()")}}.

Expand Down
5 changes: 3 additions & 2 deletions files/en-us/web/api/imagebitmap/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ browser-compat: api.ImageBitmap

{{APIRef("Canvas API")}}

The **`ImageBitmap`** interface represents a bitmap image which can be drawn to a {{HTMLElement("canvas")}} without undue latency. It can be created from a variety of source objects using the {{domxref("createImageBitmap()")}} factory method. `ImageBitmap` provides an asynchronous and resource efficient pathway to prepare textures for rendering in WebGL.
The **`ImageBitmap`** interface represents a bitmap image which can be drawn to a {{HTMLElement("canvas")}} without undue latency. It can be created from a variety of source objects using the {{domxref("Window.createImageBitmap", "createImageBitmap()")}} factory method. `ImageBitmap` provides an asynchronous and resource efficient pathway to prepare textures for rendering in WebGL.

`ImageBitmap` is a [transferable object](/en-US/docs/Web/API/Web_Workers_API/Transferable_objects).

Expand All @@ -33,7 +33,8 @@ The **`ImageBitmap`** interface represents a bitmap image which can be drawn to

## See also

- {{domxref("createImageBitmap()")}}
- {{domxref("Window.createImageBitmap")}}
- {{domxref("WorkerGlobalScope.createImageBitmap")}}
- {{domxref("CanvasRenderingContext2D.drawImage()")}}
- {{domxref("WebGLRenderingContext.texImage2D()")}}
- {{domxref("OffscreenCanvas.transferToImageBitmap()")}}
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ Some of the functions (a subset) that are common to all workers and to the main
- {{domxref("WorkerGlobalScope.btoa()", "btoa()")}}
- {{domxref("clearInterval()")}}
- {{domxref("clearTimeout()")}}
- {{domxref("createImageBitmap()")}}
- {{domxref("WorkerGlobalScope.createImageBitmap()", "createImageBitmap()")}}
- {{domxref("WorkerGlobalScope.dump()", "dump()")}} {{non-standard_inline}}
- {{domxref("WorkerGlobalScope.fetch()", "fetch()")}}
- {{domxref("WorkerGlobalScope.queueMicrotask()", "queueMicrotask()")}}
Expand All @@ -36,7 +36,7 @@ Some of the functions (a subset) that are common to all workers and to the main
The following functions are **only** available to workers:

- {{domxref("WorkerGlobalScope.importScripts", "WorkerGlobalScope.importScripts()")}} (all workers)
- {{domxref("DedicatedWorkerGlobalScope.postMessage")}} (dedicated workers only)
- {{domxref("DedicatedWorkerGlobalScope.postMessage()")}} (dedicated workers only)

## Web APIs available in workers

Expand Down
2 changes: 1 addition & 1 deletion files/en-us/web/api/web_workers_api/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ Some of the functions (a subset) that are common to all workers and to the main
- {{domxref("WorkerGlobalScope.btoa()", "btoa()")}}
- {{domxref("clearInterval()")}}
- {{domxref("clearTimeout()")}}
- {{domxref("createImageBitmap()")}}
- {{domxref("WorkerGlobalScope.createImageBitmap()", "createImageBitmap()")}}
- {{domxref("WorkerGlobalScope.dump()", "dump()")}} {{non-standard_inline}}
- {{domxref("WorkerGlobalScope.fetch()", "fetch()")}}
- {{domxref("WorkerGlobalScope.queueMicrotask()", "queueMicrotask()")}}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,15 +1,14 @@
---
title: createImageBitmap() global function
title: "Window: createImageBitmap() method"
short-title: createImageBitmap()
slug: Web/API/createImageBitmap
page-type: web-api-global-function
slug: Web/API/Window/createImageBitmap
page-type: web-api-instance-method
browser-compat: api.createImageBitmap
---

{{APIRef("Canvas API")}}{{AvailableInWorkers}}
{{APIRef("Canvas API")}}

The **`createImageBitmap()`** global method creates a bitmap from a given source, optionally cropped to contain only a portion of that source.
The method exists on the global scope in both windows and workers.
The **`createImageBitmap()`** method of the {{domxref("Window")}} interface creates a bitmap from a given source, optionally cropped to contain only a portion of that source.
It accepts a variety of different image sources, and returns a {{jsxref("Promise")}} which resolves to an {{domxref("ImageBitmap")}}.

## Syntax
Expand Down Expand Up @@ -135,5 +134,6 @@ image.src = "50x50.jpg";

## See also

- {{domxref("WorkerGlobalScope.createImageBitmap()")}}
- {{domxref("CanvasRenderingContext2D.drawImage()")}}
- {{domxref("ImageData")}}
2 changes: 1 addition & 1 deletion files/en-us/web/api/window/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -185,7 +185,7 @@ _This interface inherits methods from the {{domxref("EventTarget")}} interface._
- : Closes the current window.
- {{domxref("Window.confirm()")}}
- : Displays a dialog with a message that the user needs to respond to.
- {{domxref("createImageBitmap", "Window.createImageBitmap()")}}
- {{domxref("Window.createImageBitmap()")}}
- : Accepts a variety of different image sources, and returns a {{jsxref("Promise")}} which resolves to an {{domxref("ImageBitmap")}}. Optionally the source is cropped to the rectangle of pixels originating at _(sx, sy)_ with width sw, and height sh.
- {{domxref("Window.dump()")}} {{Non-standard_Inline}}
- : Writes a message to the console.
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
---
title: "WorkerGlobalScope: createImageBitmap() method"
short-title: createImageBitmap()
slug: Web/API/WorkerGlobalScope/createImageBitmap
page-type: web-api-instance-method
browser-compat: api.createImageBitmap
---

{{APIRef("Canvas API")}}{{AvailableInWorkers("worker")}}

The **`createImageBitmap()`** method of the {{domxref("WorkerGlobalScope")}} interface creates a bitmap from a given source, optionally cropped to contain only a portion of that source.
It accepts a variety of different image sources, and returns a {{jsxref("Promise")}} which resolves to an {{domxref("ImageBitmap")}}.

## Syntax

```js-nolint
createImageBitmap(image)
createImageBitmap(image, options)
createImageBitmap(image, sx, sy, sw, sh)
createImageBitmap(image, sx, sy, sw, sh, options)
```

### Parameters

- `image`
- : An image source, which can be any one of the following:
- {{domxref("HTMLImageElement")}}
- {{domxref("SVGImageElement")}}
- {{domxref("HTMLVideoElement")}}
- {{domxref("HTMLCanvasElement")}}
- {{domxref("Blob")}}
- {{domxref("ImageData")}}
- {{domxref("ImageBitmap")}}
- {{domxref("OffscreenCanvas")}}
- {{domxref("VideoFrame")}}
- `sx`
- : The x coordinate of the reference point of the rectangle from which the `ImageBitmap` will be extracted.
- `sy`
- : The y coordinate of the reference point of the rectangle from which the `ImageBitmap` will be extracted.
- `sw`
- : The width of the rectangle from which the `ImageBitmap` will be extracted.
This value can be negative.
- `sh`
- : The height of the rectangle from which the `ImageBitmap` will be extracted. This value can be negative.
- `options` {{optional_inline}}

- : An object that sets options for the image's extraction.
The available options are:

- `imageOrientation`

- : Specifies how the bitmap image should be oriented.

- `from-image`
- : Image oriented according to EXIF orientation metadata, if present (default).
- `flipY`
- : Image oriented according to EXIF orientation metadata, if present, and then flipped vertically.
- `none`
- : Image oriented according to image encoding, ignoring any metadata about the orientation (such as EXIF metadata, that might be added to an image to indicate that the camera was turned sideways to capture the image in portrait mode).

- `premultiplyAlpha`
- : Specifies whether the bitmap's color channels should be premultiplied by the alpha channel.
One of `none`, `premultiply`, or `default` (default).
- `colorSpaceConversion`
- : Specifies whether the image should be decoded using color space conversion.
Either `none` or `default` (default).
The value `default` indicates that implementation-specific behavior is used.
- `resizeWidth`
- : A long integer that indicates the output width.
- `resizeHeight`
- : A long integer that indicates the output height.
- `resizeQuality`
- : Specifies the algorithm to be used for resizing the input to match the output dimensions.
One of `pixelated`, `low` (default), `medium`, or `high`.

### Return value

A {{jsxref("Promise")}} which resolves to an {{domxref("ImageBitmap")}} object containing bitmap data from the given rectangle.

## Examples

See {{domxref("Window.createImageBitmap()")}} for examples.

## Specifications

{{Specifications}}

## Browser compatibility

{{Compat}}

## See also

- {{domxref("Window.createImageBitmap()")}}
- {{domxref("CanvasRenderingContext2D.drawImage()")}}
- {{domxref("ImageData")}}
Loading