CanvasKit wasm encodeToBytes very slow

[N M]

Hi,

I want to use CanvasKit as offscreen canvas replacement in browser. But it turns out for me that encodeToBytes is way too slow.

My code:

      CanvasKitInit({

            locateFile: (file) => '/node_modules/canvaskit-wasm/bin/' + file,

        }).then((CanvasKit) => {

... reading an image here in img,. jpeg in my case

  const skcanvas = CanvasKit.MakeCanvas(img.width,img.height);

make byte array and that line is super fast:

              const skImage = CanvasKit.MakeImageFromEncoded(byteArray);

but

            let pngBytes=skImage.encodeToBytes(CanvasKit.ImageFormat.PNG)

is extremely slow.

in comparison to normal offscreen-canvas in browser it is 7 times slower. So at the end I cannot use this fast library which kills performance at the very end of all fast image operations before.

Also webp was also not working as image format here for me ( I made npm install canvaskit-wasm)

Any idea to speed up PNG conversion here and what would be best to get webp support as well?

Thank you

[N M]

I made a bit more tests and 

                let pixels=skImage.readPixels(0, 0, {width:img.width,height:img.height,colorType:CanvasKit.ColorType.RGBA_8888,alphaType:CanvasKit.AlphaType.Opaque,colorSpace:CanvasKit.ColorSpace.SRGB})  

is around 5 times slower than ctx.getImageData(0, 0, img.width, img.height)

on a real canvas. My idea was to make image conversion somewhere else but that is  not so good idea as well.

[William Candillon]

Here, you can rely on HTML APIs directly for these tasks.

For instance, we created a MakeImageFromEncodedAsync function to use the Web APIs directly for image decoding: https://gist.github.com/wcandillon/6eaf74fd1b3fe6568f68569722743ab6

Here we use bytes as in your example but maybe you would rather deal with the URL directly: https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image#examples (with the onload event).

 
From there, CanvasKit provides makeImageFromTextureSource or MakeLazyImageFromTextureSource. This might be another useful demo: https://demos.skia.org/demo/textures/

Kind regards,

William