CanvasKit.MakeImageFromEncoded, when used with Browser APIs for loading/decoding images.
- `CanvasKit.MakeImageFromCanvasImageSource` takes either an HTMLImageElement,
SVGImageElement, HTMLVideoElement, HTMLCanvasElement, ImageBitmap, or OffscreenCanvas and returns
an SkImage. This function is an alternative to `CanvasKit.MakeImageFromEncoded` for creating
SkImages when loading and decoding images. In the future, codesize of CanvasKit may be able to be
reduced by removing image codecs in wasm, if browser APIs for decoding images are used along with
`CanvasKit.MakeImageFromCanvasImageSource` instead of `CanvasKit.MakeImageFromEncoded`.
- Three usage examples of `CanvasKit.MakeImageFromCanvasImageSource` in core.spec.ts. These
examples use browser APIs to decode images including 2d canvas, bitmaprenderer canvas,
HTMLImageElement and Blob.
- Added support for asynchronous callbacks in perfs and tests.
Here are notes on the image decoding approaches we tested and perfed in the process of finding ways
to use Browser APIs to decode images:
1. pipeline:
ArrayBuffer → ImageData → ctx.putImageData →
context.getImageData → Uint8Array → CanvasKit.MakeImage
❌ Problem: ImageData constructor expects decoded bytes already.
2. interface.js - CanvasKit.ExperimentalCanvas2DMakeImageFromEncoded (async function)
pipeline:
ArrayBuffer → Blob -> HTMLImageElement ->
draw on Canvas2d -> context.getImageData → Uint8Array →
CanvasKit.MakeImage
✅ Works
⏱ Performance: 3rd place (in my testing locally)
3. interface.js - CanvasKit.ExperimentalCanvas2DMakeImageFromEncoded2 (async function)
ArrayBuffer → Blob → ImageBitmap → draw on Canvas2d →
context.getImageData → Uint8Array → CanvasKit.MakeImage
✅ Works
⏱ Performance: 2nd place (in my testing locally)
4. interface.js - CanvasKit.ExperimentalCanvas2DMakeImageFromEncoded3 (async function)
ArrayBuffer → Blob → ImageBitmap →
draw on canvas 1 using bitmaprenderer context →
draw canvas 1 on canvas 2 using drawImage → context2d.getImageData →
Uint8Array → CanvasKit.MakeImage
✅ Works
⏱ Performance: 1st place (in my testing locally) - quite surprising, this in some ways seems to be a more roundabout way of CanvasKit.ExperimentalCanvas2DMakeImageFromEncoded2, but it seems bitmaprenderer context is fairly fast.
Bug: skia:10360
Change-Id: I6fe94b8196dfd1ad0d8929f04bb1697da537ca18
Reviewed-on: https://skia-review.googlesource.com/c/skia/+/295390
Reviewed-by: Kevin Lubick <kjlubick@google.com>
Changes are largely mechanical. Non-mechanical changes to support newer
versions of emscripten are enumerated below, in format ${EMSCRIPTEN_VERSION}:
${RELEVANT_CHANGE}.
- 1.39.9: TOTAL_MEMORY has been renamed INITIAL_MEMORY.
- 1.39.12: passing of linker flags to wasm-ld has changed in a way that requires
supplying `--no-entry` to avoid error message "wasm-ld: error: entry symbol
not defined (pass --no-entry to suppress): main".
- 1.39.16: The factory function created by using `MODULARIZE` build option now
returns a Promise instead of the module instance. As such, the ready.js
workaround is removed. Note this is a breaking API change for CanvasKit,
which now uses just `then()` and not `ready().then()`.
- 1.38.33: `emsdk install` hasn't required the `-64bit` suffix on version names
since `1.38.33`, so we remove them. E.g. `emsdk install sdk-1.39.6-64bit`
simply becomes `emsdk install sdk-1.39.16`.
cf. https://github.com/emscripten-core/emscripten/blob/master/ChangeLog.md
Bug: NONE
Change-Id: Iabec4bd5ad7db2e0715ad42c2e4cf7d67b192b4c
Reviewed-on: https://skia-review.googlesource.com/c/skia/+/291182
Reviewed-by: Kevin Lubick <kjlubick@google.com>
Note to the reviewer: Look at tests/util.js first and then
look at the others. Gerrit lets you ignore whitespace changes,
which I would recommend for this.
This emulates tests on the C++ side and dramatically reduces
boilerplate on the test code.
This also uses the beforeEach(async () => {}) trick to save
a lot of promise resolutions before each tests.
I try to clean up the style a bit as I go, seriously thinking
about adding eslint for at least the tests.
Change-Id: Iced4abb57f66572035ab5d1a54b374055e8aaa58
Reviewed-on: https://skia-review.googlesource.com/c/skia/+/281439
Reviewed-by: Joe Gregorio <jcgregorio@google.com>
