Reduce jank (blocking main thread)

[Dariusz Rzepka]

Correct me if I'm wrong about this. Is it possible to either split the heavy pre worker image loading to smaller parts or move it to the worker to not block main thread?

I want to use image resizing in the background. My application allows a user to upload multiple photos and before I send the photos to the backend I generate preview which can be immediately used. But when a user uploads many photos then there is a lot of resizing to be done in the background which makes the application laggy.

Example performance timeline when resizing - main thread blocked for 1 second.

[Vitaly Puzrin]

Please take a look into source index. Pica's main input is canvas. It tries to normalize different kinds of input to it. You can prepare canvas with any way you wish if you don't like default.

AFAIK, createImageBitmap returns promise and should not block. I don't develop for browser actively and can't comment details. Can discuss only concrete proposals, what exactly should be changed.

[Dariusz Rzepka]

I understand. Since the library calls itself high quality image resize in browser maybe it would be nice to provide a solution to make the resize smoothly without blocking interactions.

I am playing around with resizeBuffer to use it in a worker. Do you know any other way to create RGBA bitmap other than using createImageBitmap (which is not available in older browsers)?

  const response = await fetch(imageURL);
  const blob = await response.blob();
  // const arrayBuffer = await response.arrayBuffer();
// here use pica.resizeBuffer

[Vitaly Puzrin]

Have you looked src as i suggested? It contains different kinds of canvas create, not only createImageBitmap.