Comments (2)
cc @whatwg/canvas
FWIW, there is no such option as { alpha: false, premultiplyAlpha: "none" }
on createElement("canvas")
, you probably got confused with getContext(type, option)
though premultipliedAlpha
is only a valid option for WebGL and not for bitmaprenderer, which only has alpha
.
Still I guess there is indeed something that needs to be handled here to attain interop.
from html.
Sorry for the confusion, I meant it's not clear if premultiplyAlpha: "none"
on createImageBitmap
is to be respected when the data is read back. It is respected on Chrome (which I think is correct) but it's not on WebKit/Firefox.
To avoid more confusion, here's the code from the reproduction page linked above:
// fetch an image with alpha channel and put it on a canvas with transferFromImageBitmap
const url = "https://cdn.glitch.global/073b6ba0-42e6-4706-9e9d-9dfacb8f3a8b/TransparentCat-repro.png?v=1708264432674";
const imageBitmap = await fetch(url)
.then(response => response.blob())
// this makes the difference on Chrome, but does not affect the result on WebKit/Firefox
.then(blob => createImageBitmap(blob, { premultiplyAlpha: "none" }))
.then(imageBitmap => imageBitmap);
// create a canvas
const canvas = document.createElement("canvas");
// setting width/height is probably not needed as the transferred image takes over
canvas.width = imageBitmap.width;
canvas.height = imageBitmap.height;
// alpha parameter here does not influence the readback result, but does influence how the canvas is displayed on the page (seems to always be premultiplied, but with or without black background)
const ctx = canvas.getContext("bitmaprenderer", { alpha: false });
ctx.transferFromImageBitmap(imageBitmap);
// turn canvas to PNG and download it
const a2 = document.createElement("a");
a2.innerText = "Download readback";
// this should contain unpremultiplied data โ approx. same RGBA data as in the original
a2.href = canvas.toDataURL("image/png");
which results in these RGB channels in the readback images:
Options | Chrome | Firefox | WebKit |
---|---|---|---|
createImageBitmap(blob, { premultiplyAlpha: "none" }) |
|||
createImageBitmap(blob, { premultiplyAlpha: "default" }) |
Notes:
- Chrome gets it right (I believe)
- the option doesn't do anything in Safari
- Firefox double-unpremultiplies instead of treating the data correctly (I believe)
- For some reason, even the "default" result is different in Firefox (brighter)
from html.
Related Issues (20)
- attribute change steps for popover may fire events synchronously HOT 6
- Update UA stylesheet rules to use `:any-link` instead of `:visited` or `:link` HOT 6
- Define interaction with `field-sizing` CSS property and inline writing suggestions
- Storage event should probably fire on Document that didn't call localStorage getter
- Worklet agents and the event loop HOT 1
- Using multiple h1 tag in a page HOT 1
- Dark mode styling for "yes" table attributes is not ledgible HOT 1
- Improve DX of element reference attributes by allowing relative references instead of only ids HOT 7
- Render-blocking: the definition of "created by its node document's parser" is a little bit vague HOT 5
- UI Element Attribute HOT 5
- align="justify" should align to start, not to left HOT 4
- "Align descendants" believes used margins are altered in overconstrained cases, but that's no longer the case HOT 2
- Clarification on Element reflected IDL attribute steps HOT 9
- Different parsing behavior for "</script>" and "</div>" strings HOT 1
- Nested comment tags. HOT 8
- It's not clear how constraint validation works for FACE if the 'validation anchor' is null HOT 2
- Upcoming WHATNOT meeting on 3/7/2024 HOT 8
- Add a way to automatically get script license and unminified code (if available)
- Clarify context of ยง4.12.2 the `<noscript>` element HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ๐๐๐
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from html.