Usage in Browser

[smurrayatwork]

I've installed this npm package in a repo using storybook, as I'm trying to experiment with it in React but I'm unable to get it working in the browser. Of course, it downloads a version of the package for node use only, so I'm wondering how to get this working in a browser, since the files provided by the npm package use things specific to node.

I know the playground works, so do I have to grab a copy of this repo and build things locally?

[kleisauke]

The current v0.0.1 NPM package is only usable within a Node.js environment (for now). I still have to figure out how to distribute the web variant or check whether it is possible to use an multi-targeted output (one that can be used on both web and Node), as I don't want to blow the NPM package up too much (in terms of size).

As a potential workaround you could just download these files from the playground.
https://wasm-vips.kleisauke.nl/lib/vips.d.ts
https://wasm-vips.kleisauke.nl/lib/vips.js
https://wasm-vips.kleisauke.nl/lib/vips.wasm
https://wasm-vips.kleisauke.nl/lib/vips.worker.js

Or build it yourself in the source directory with npm run build.

[amittal-quot]

There does not seem be be any npm run build:web command

  "scripts": {
    "build": "docker build -t wasm-vips . && docker run --rm -v $(pwd):/src wasm-vips ./build.sh",
    "test:web": "serve -c test/unit/serve.json",
    "test:node": "cd test/unit && npm run test",
    "test": "npm run test:node",
    "bench:web": "serve -c test/bench/serve.json",
    "bench:node": "cd test/bench && npm run test",
    "bench": "npm run bench:node"
  },

[kleisauke]

The next version of wasm-vips will include the web variant in the NPM package using the following structure:

$ tree lib/ -h --dirsfirst
lib/
├── node-commonjs
│   ├── [  94K]  vips.js
│   └── [ 3.1K]  vips.worker.js
├── node-es6
│   ├── [  94K]  vips.mjs
│   └── [ 3.2K]  vips.worker.mjs
├── [ 248K]  vips.d.ts
├── [  93K]  vips-es6.js
├── [ 2.3K]  vips-es6.worker.js
├── [  93K]  vips.js
├── [ 4.8M]  vips.wasm
└── [ 2.4K]  vips.worker.js

2 directories, 10 files

The node-commonjs and node-es6 directories ensures that wasm-vips can be imported as both CommonJS and ES6 module on Node. For web usage, the lib/vips-es6.js and lib/vips.js files take care of that. Note that the ES6 module cannot be used on Firefox due to https://bugzil.la/1540913.

@amittal-quot The build:web script was merged into the build script with commit 53dd74e. You can just run npm run build to build for both web and Node.js environments.

[JoxC]

@kleisauke Thanks for your great work!
When I run npm run build on Mac, I always got this:

[ 80%] Linking CXX executable ../../../../lib/web/vips.js
wasm-ld: error: unable to find library -lUSE_PTHREADS=1
wasm-ld: error: unable to find library -lUSE_PTHREADS=1
wasm-ld: error: unable to find library -lUSE_PTHREADS=1

I'm not familiar with Emscripten cross compile, could you help me figure out this ? #6

[kleisauke]

@JoxC It looks like this Meson patch was not applied during the build of the Docker image.

wasm-vips/Dockerfile

Lines 23 to 25 in 71ee394

	ARG MESON_PATCH=https://github.com/kleisauke/wasm-vips/raw/master/build/patches/meson-emscripten.patch
	RUN cd $(dirname `python3 -c "import mesonbuild as _; print(_.__path__[0])"`) \
	&& curl -Ls $MESON_PATCH | patch -p1

Please can you open a new issue for this.

[blipk]

Hi.

I'm trying to get the web version of this working, I tried the npm module at first, but despite what your README says, after I've come here it's clear it doesn't include the web release version yet.

So I tried the files linked above, and I also tried building it myself with the docker file and I get this error stack:

I'm using npm and parcel-bundler to build a dist release, it handles other wasm libraries fine.

EDIT:
I needed the .wasm in the root directory, but now I run into this error:

[blipk]

Ok, seems to be working now, rather than using import in my existing module I had to drop vips.js in a script tag

I believe the parcel bundler was bundling incorrectly when it was imported from index.js

[blipk]

Is SVG loading supported? newFromBuffer throws VipsForeignLoad: buffer is not in a known format
I have seen other vips wrappers supporting this though

[kleisauke]

@blipk I'm glad it's working now. The README reflects the upcoming v0.0.2 release, which should arrive when libvips 8.12 is released. ES6 module import doesn't currently work on the web, as you noticed. I had to revert that with commit ba6f7ee to ensure compatibility with Firefox.

The difference between wasm-vips and the pre-built binaries provided by sharp (and NetVips) is that these dependencies are not (currently) compiled for WebAssembly:

• librsvg (support for loading SVG images)¹
• libheif (support for loading and saving AVIF images)²
• libgsf (support for creating image pyramids with dzsave)
• liborc (improves the performance of the resize, blur and sharpen operations)³
• libimagequant (support for writing GIFs or 8-bit palette-ised PNGs)⁴

¹: Also requires: gdk-pixbuf, cairo, pixman, fontconfig, pango, freetype, harfbuzz, fribidi and libxml2.
²: Also requires: libaom.
³: Might not be needed in the future, see the simd branch.
⁴: Will be included within the next release, see commit b926c62.

[blipk]

Thanks, I was confused as calling svgload was saying it doesnt exist if called with correct args, but if given extra args would give me an argument count error. The pre-emptive docs are a little confusing too.

I managed to use a canvas to convert SVG to png data URI, then fetch that to a blob, and then convert that to a uint8array to pass to newFromBuffer

[kleisauke]

v0.0.2 now available.