Code Monkey home page Code Monkey logo

Comments (3)

kleisauke avatar kleisauke commented on June 28, 2024 2

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

from wasm-vips.

bentron2000 avatar bentron2000 commented on June 28, 2024

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

from wasm-vips.

kleisauke avatar kleisauke commented on June 28, 2024

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)

from wasm-vips.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.