1363861 - createImageBitmap() does not support resize options (resizeQuality remains)

Status: NEW

(Core :: Graphics: Canvas2D, defect)

Description

[Vitaly Puzrin]

User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:53.0) Gecko/20100101 Firefox/53.0
Build ID: 20170418123818

Steps to reproduce:

https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/createImageBitmap


let c = document.createElement('canvas');
c.width = 100;
c.height = 100;

createImageBitmap(c, 0, 0, 100, 100, {
  resizeWidth: 10,
  resizeHeight: 10,
  resizeQuality: 'high'
})
.then(bitmap => {
  console.log((bitmap.width === 10) ? 'supported' : 'not supported'
});

// => not supported

Options { resizeWidth, resizeHeight, resizeQuality } are not supported now.


Actual results:

createImageBitmap() does not change result size when  { resizeWidth, resizeHeight } options passed.


Expected results:

Expect downscaled result.

Comment 1

[Hsin-Yi Tsai (she/her) [:hsinyi]]

Canvas:2D seems a better fit ... I guess...

Comment 2

[Jeff Muizelaar [:jrmuizel]]

What other browsers support resizeWidth etc?

Comment 3

[Vitaly Puzrin]

Chromium with enabled chrome://flags/#enable-experimental-canvas-features flag has support, but it still has problems with quality https://bugs.chromium.org/p/chromium/issues/detail?id=712844

Comment 5

[Matjaz Gregoric]

It doesn't look like this was ever resolved. The linked tickets (https://bugzilla.mozilla.org/show_bug.cgi?id=1335594, https://bugzilla.mozilla.org/show_bug.cgi?id=1367251) did add support for some createImageBitmap() options, but support for resize options (resizeWidth, resizeHeight, and resizeQuality) was never added, as far as I can tell.

Comment 6

[Anne (:annevk)]

Fair enough, let's keep this open then.

Comment 7

[Tom S. (please needinfo tschuster)]

Bug 1733559 added support for resizeWidth and resizeHeight.

Comment 8

[Anne (:annevk)]

Thanks Tom! Not sure how high priority resizeQuality is, but if it's relatively straightforward we should probably do it.

Comment 9

[mail]

We have some real-world use-cases for this (currently using canvas + math, but would prefer to use this when it's landed).

I'd say image quality (resizeQuality) matter a lot in practice, for example to tune image size and thereby upload size / upload time. Obviously this is anecdotal, but I think it's highly useful.

Great that resizeWidth and resizeHeight is now supported!

Comment 10

[mail]

Just wanted to see if there are any updates on this one?

createImageBitmap has been around for a while, but because of various bugs it's still hard to use (this is one of them).

A few examples of use-cases for createImageBitmap:

• Crop images on-device
• Resize images on-device before uploading to a server
  • For example a photo from <input type="file" capture="environment">.
  • On-device image resize has long been problematic, with the main workaround being the Canvas element, but every implementation I've seen has been buggy or hard to use, for example due to iOS canvas memory limits.
• Take snapshots from a video feed
• Extract sprites from a sprite sheet
• Take non-rotated image pixels with an associated EXIF tag and output rotated pixels (without any EXIF), or put differently strip EXIF and apply rotation to image data.
  • This is useful since many server-side systems prefer to handle all images without accompanying exif rotation data.