kleisauke / wasm-vips

libvips for the browser and Node.js, compiled to WebAssembly with Emscripten.
https://kleisauke.github.io/wasm-vips/
MIT License
463 stars 25 forks source link

Add progress information #63

Closed swissspidy closed 4 months ago

swissspidy commented 6 months ago

On the command line --vips-progressruns a progress indicator during computation. It can be useful to see where libvips is looping and how often.

I wonder if it's possible to expose progress in a similar way in wasm-vips, for example by adding an option to provide a callback function that gets called with the current progress. That way, if an operation takes a bit longer, one can display a progress bar to users as well.

kleisauke commented 6 months ago

Good idea! I just implemented this with commit c004099053e5520fcde284ae987b6ec308d6035e, allowing you to do this:

// Load a huge image
const im = vips.Image.black(100000, 100000);

// Attach progress feedback
let lastPercent = 0;
im.onProgress = (percent) => {
  // This callback is triggered once per work unit (typically a 128 x
  // 128 area of pixels) during image computation. Therefore, we only
  // need to print when there's a change in the percentage.
  if (percent !== lastPercent) {
    console.log(`${percent}% complete`);
    lastPercent = percent;
  }

  // To stop long-running computations, we could block evaluation after a
  // certain amount of time. To avoid complexity in this example, issue the
  // kill signal after 25% completion.
  if (percent >= 25) {
    im.kill = true;
  }
};

// Save
im.writeToFile('x.png');

I also made it possible to stop long-running computations with commit 20f84144b3e9d0b8fdf2798cbfe3c831a3286300, as shown in the example above.

This will be in v0.0.8.

swissspidy commented 6 months ago

This is fantastic, thanks a lot for this fast response & implementation!

Looking forward to implementing both in my project.

kleisauke commented 4 months ago

v0.0.8 is now available with these improvements.