Comments (3)
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);
from wasm-vips.
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.
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)
- `wasm-vips` is unstable on Node `18.14.2+` and `19.4.0+` HOT 11
- Unstable on Deno HOT 2
- Playground feature request: ability to import file from disk HOT 3
- `WasmTrapJSTypeError` while loading an SVG when building with LTO HOT 3
- Docker compilation error HOT 6
- setup wasm-vips for next.js/react HOT 3
- TS types improvements HOT 3
- writeToBuffer increases RSS size till OOMKilled HOT 3
- Not working on deno deploy HOT 1
- ab [vips::Error]: no such operation pdfload_buffer VipsOperation: class "pdfload_buffer" not found HOT 1
- JPEG 2000 Support HOT 1
- Errors with vite HOT 27
- No paths work when reading files (Deno) HOT 2
- Promise remains in pending mode HOT 3
- Error `heifload: ignoring nclx profile` when converting to AVIF and resizing HOT 4
- Add progress information HOT 3
- Error: need to see wasm magic number HOT 1
- Enhancement — more modular loading HOT 3
- Interlace option in jpegsaveBuffer doesn’t seem to work HOT 1
- [Question] How do you deal with CDNs and Vite HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from wasm-vips.