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 Browser #4

Closed
smurrayatwork opened this issue Apr 23, 2021 · 11 comments
Closed

Usage in Browser #4

smurrayatwork opened this issue Apr 23, 2021 · 11 comments
Labels
question Further information is requested
Milestone

Comments

@smurrayatwork
Copy link

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 kleisauke added the question Further information is requested label May 11, 2021
@kleisauke
Copy link
Owner

kleisauke commented May 11, 2021

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
Copy link

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
Copy link
Owner

kleisauke commented Jul 20, 2021

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
Copy link

JoxC commented Jul 20, 2021

@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
Copy link
Owner

@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
Copy link

blipk commented Nov 3, 2021

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:
image

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:
image

@blipk
Copy link

blipk commented Nov 3, 2021

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
Copy link

blipk commented Nov 3, 2021

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

@kleisauke
Copy link
Owner

kleisauke commented Nov 4, 2021

@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)1
  • libheif (support for loading and saving AVIF images)2
  • libgsf (support for creating image pyramids with dzsave)
  • liborc (improves the performance of the resize, blur and sharpen operations)3
  • libimagequant (support for writing GIFs or 8-bit palette-ised PNGs)4

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

@blipk
Copy link

blipk commented Nov 5, 2021

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 kleisauke added this to the v0.0.2 milestone Mar 19, 2022
@kleisauke
Copy link
Owner

v0.0.2 now available.

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

5 participants