Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Usage in Web Workers (again) #15

Closed
bentron2000 opened this issue Apr 26, 2022 · 3 comments
Closed

Usage in Web Workers (again) #15

bentron2000 opened this issue Apr 26, 2022 · 3 comments
Labels
question Further information is requested

Comments

@bentron2000
Copy link
Contributor

I saw a previous query about using wasm-vips in a web worker - but the op closed it due to realising that the lib opens its own web worker. #7

Would it be possible to use this lib inside a custom webworker? if so - any guidance would be greatly appreciated.

@kleisauke kleisauke added the question Further information is requested label Apr 27, 2022
@kleisauke
Copy link
Owner

Hi @bentron2000,

I think it should work without any issues, as long as you override Emscripten's locateFile hook and mainScriptUrlOrBlob setting. For example, with this:

importScripts('./vips.js');

Vips({
  locateFile: (fileName, scriptDirectory) => scriptDirectory + fileName,
  mainScriptUrlOrBlob: './vips.js',
}).then(vips => {
  const im = vips.Image.black(100, 100);
  console.log(JSON.stringify({
    width: im.width,
    height: im.height,
    space: im.interpretation,
    channels: im.bands,
    depth: im.format
  }));
  const outBuffer = im.writeToBuffer('.png');
  console.log(outBuffer);
  im.delete();
  postMessage('Done!');
});
const worker = new Worker('worker.js');
worker.onmessage = e => console.log(e.data);

I see:
worker

@bentron2000
Copy link
Contributor Author

Amazing!

That was exactly what I was looking for. Thank you.

I've put in a PR with that parameter in the typescript defs to make it easier to find for others. #16

Really appreciate your efforts on this project - just great :)

B

@kleisauke
Copy link
Owner

kleisauke commented Nov 24, 2023

FWIW, wasm-vips' ES6 modules doesn't require overriding Emscripten's locateFile hook and mainScriptUrlOrBlob setting. For example:

es6-worker.js:

import Vips from './vips-es6.js';

Vips({
  // Optimize startup time by disabling the dynamic modules
  dynamicLibraries: []
}).then(vips => {
  const im = vips.Image.black(100, 100);
  console.log(JSON.stringify({
    width: im.width,
    height: im.height,
    space: im.interpretation,
    channels: im.bands,
    depth: im.format
  }));
  const outBuffer = im.writeToBuffer('.png');
  console.log(outBuffer);
  im.delete();
  postMessage('Done!');
});

index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>wasm-vips in a ES6 web worker</title>
  </head>
  <body>
    <script>
      const worker = new Worker('es6-worker.js', { type: 'module' });
      worker.onmessage = e => console.log(e.data);
    </script>
  </body>
</html>
$ docker run -p 8080:80 --rm -v $(pwd):/src emscripten/emsdk:3.1.49 emrun --port 80 --no_browser /src
# Visit http://localhost:8080/index.html

(this example assumes vips-es6.js, vips.wasm and vips-es6.worker.js are served from the same directory where es6-worker.js and index.html reside)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
question Further information is requested
Projects
None yet
Development

No branches or pull requests

2 participants