Bug 182424 - Complete ImageBitmap implementation
Summary: Complete ImageBitmap implementation
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Canvas (show other bugs)
Version: WebKit Nightly Build
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
Depends on: 149990 183439 182335 182388 183131 183247 183438 183440 184449 211484 227140
  Show dependency treegraph
Reported: 2018-02-02 02:03 PST by Ms2ger (he/him; ⌚ UTC+1/+2)
Modified: 2023-05-28 22:43 PDT (History)
8 users (show)

See Also:


Note You need to log in before you can comment on or make changes to this bug.
Description Ms2ger (he/him; ⌚ UTC+1/+2) 2018-02-02 02:03:16 PST
At the very least:

* Cannot create ImageBitmap with a negative width or height
  -> should be a minor fix
* createImageBitmap with HTMLVideoElement is not implemented
  -> bug 182388
* createImageBitmap with OffscreenCanvas is not implemented
  -> should be a minor fix; OffscreenCanvas::transferToImageBitmap() does something similar
* createImageBitmap with SVGImageElement is not implemented
* createImageBitmap with ImageData is not implemented
  -> needs to integrate mime sniffing code somehow
* createImageBitmap with Blob is not implemented
  -> needs to integrate mime sniffing code somehow
Comment 2 ik 2021-07-13 09:22:19 PDT
Comment 3 Ashley Gullen 2022-01-03 08:26:08 PST
Is the "premultiplyAlpha" option supported? It looks like WebGL gets unpremultiplied data when specifying that option,  it's hard to find up-to-date documentation, and it's difficult to feature detect the supported ImageBitmapOptions.
Comment 4 MrMartian 2022-03-14 13:31:30 PDT
The image is still getting mutated a little when createImageBitmap is used in Safari. I store data in an RGBA encoded image, so any changes causes errors. It seems like the default setting is not entirely "premultiply", nor is it "none". For now, if browser detects it's safari, I have to use a polyfill to avoid image manipulation:

if (!('createImageBitmap' in window) || isSafari) {
  window.createImageBitmap = async function (blob) {
    return new Promise((resolve, reject) => {
      const img = document.createElement('img')
      img.addEventListener('load', function () { resolve(this) })
      img.src = URL.createObjectURL(blob)
      img.deleteURL = function () { URL.revokeObjectURL(this.src) }
Comment 5 Ran Buchnik 2023-05-28 22:43:42 PDT