Bug 182424 - Complete ImageBitmap implementation
Summary: Complete ImageBitmap implementation
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 182335 182388 183131 183247 183438 183439 183440 184449 211484 227140 237082
  Show dependency treegraph
Reported: 2018-02-02 02:03 PST by Ms2ger (he/him; ⌚ UTC+1/+2)
Modified: 2023-10-30 05:38 PDT (History)
9 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
Comment 6 Kimmo Kinnunen 2023-10-27 00:45:23 PDT
Thank you for the reports.

ashley@scirra.com: would you have a reproduction testcase for your problem?

oconnorct1@gmail.com: would you have a reproduction for your problem?
Comment 7 Ashley Gullen 2023-10-27 04:34:54 PDT
It's been so long it's difficult to remember what the original situation was. But I think I filed issue 237082 in the end, which was fixed eventually.
Comment 8 Kimmo Kinnunen 2023-10-27 04:42:30 PDT
Thank you, seems probable.
Comment 9 MrMartian 2023-10-30 04:56:17 PDT
Sorry for the delay.
I checked ticket 237082 with the example and it was identical to my problem. Seems it is resolved now. Thanks for your effort!
Comment 10 Kimmo Kinnunen 2023-10-30 05:38:41 PDT
Seems fixed in the bugs listed in depends on section.